Uncaught DOMException on Marko 5.33.14 about marko HOT 15 CLOSED

Same for 5.33.15

from marko.

@DylanPiercey confirmed, works like a charm! Thank you!

from marko.

@xtremespb I'm trying to reproduce but when I run npm run build -- --dev I get this

> [email protected] build-dev
> webpack --mode development --no-color


[webpack-cli] Failed to load '../hereticjsorg/heretic/webpack.config.js' config

[webpack-cli] Error: Cannot find module '../hereticjsorg/heretic/site/etc/languages.json'

from marko.

@DylanPiercey, sorry, forgot to mention the npm run configure command.

Please use the following commands to reproduce:

git clone https://github.com/hereticjsorg/heretic.git
cd heretic
npm i
npm i [email protected] --save
npm run configure
npm run build -- --dev
npm run server

The server is listening on http://127.0.0.1:3001/. You will see error messages in the console.

If you don't run the npm i [email protected] --save command, it will run Marko 5.33.13, and there will be no problems.

from marko.

@xtremespb I ran the configure command, but now after rebuilding and such I get this error:

> [email protected] server
> node dist/server

{"level":50,"time":1713125895538,"pid":76050,"hostname":"...","msg":"Redis Error: connect ECONNREFUSED 127.0.0.1:6379"}

I tried editing src/core/defaults/config/system.js to disable redis but it didn't work

from marko.

@DylanPiercey, my bad, there was an error which somehow has passed the CI/CD check.

I've fixed it in a new release, now you can see the error following the same steps once again. Sorry for an inconvenience. I've just followed the steps from scratch on a fresh VM.

from marko.

@xtremespb I am now able to reproduce. However I am not 100% sure what the issue is yet.

It seems related to your translation tag https://github.com/hereticjsorg/heretic/blob/master/src/core/components/t/index.marko#L6-L8

For some reason there's a hydration mismatch and the fact that this tag has a no-update is making it so that Marko can't recover. I'll have to dig more.

from marko.

@xtremespb I'm trying to take a closer look, but it'd be nice if I could use Marko in dev mode. It seems to be always using the production build of Marko even with build-dev. Do you know why that is?

from marko.

One thing I noticed, since I'm experiencing the same behaviour/bug, is that it only happens in production mode. When it runs in dev mode, I don't see that error and everything works normally.

from marko.

@DylanPiercey, first of all, thank you very much for your efforts. I believe this might be important for everyone to fix this ;-)

I was trying to play with MARKO_DEBUG variable and finally have completely disabled it on the webpack level, because the website don't work stable otherwise. But now I've released a new version where you can enable or disable this flag from the configuration file.

Please follow these steps in order to reproduce:

1. git clone https://github.com/hereticjsorg/heretic.git
2. cd heretic
3. npm i
4. npm i [email protected] --save
5. npm run configure
6. Edit the ./site/etc/system.js file and set markoDebug to true in order to enable MARKO_DEBUG
7. npm run build -- --dev
8. npm run server

Thank you!

from marko.

@MiloCasagrande do you happen to have a reproduction you could share also?

from marko.

Unfortunately I do not, and I cannot share my code base (company policy), sorry. :-(

Not sure if I can squeeze a little bit of time to create a smaller example that can reproduce the problem (or maybe a smaller example will not even have this problem).

What I have witnessed though, is that with multiple marko components, or a "components chain" (nested components import), and a mix of no-update tags, will trigger the problem in production. I tried to remove some components and almost all no-update tags to pin-point the problem, but couldn't get to the root cause.

from marko.

@xtremespb this should be fixed in the latest release, let me know otherwise.

@MiloCasagrande I'm unsure how this could be prod only so it's possible your issue is different but could you also try latest?

from marko.

@DylanPiercey unfortunately I'm still facing the same issue. I need to find the time to debug it better.

I noticed I have this error when using a Marko-component from inside an <await> block.
This is the rough code of how things are in my code base right now:

<component-a attr1="foo" attr2=["a", "b"]>
  <div no-update key="awaitComponentB">
    <await(dataPromise) client-reorder=true timeout=10000>
      <@then|data|>
        <componenent-b data=data />
      </@then>
      <@placeholder>
       <p>Loading data...</p>
      </@placeholder>
    </await>
  </div>
</component-a>

I have to wrap the <await> block inside a <div no-update key="key"> otherwise the <await> will never work.

component-a is something like this:

<div class=attr2>
 <if(attr1)>
  <p>Something</p>
 </if>
 <${input.renderBody}/>
</div>

from marko.

I made a small test today: if I remove the client-reorder=true or set it to false, I don't see anymore this error (but I lose the placeholder showing up and the server-rendered content after that <await> block).

from marko.