Uncaught DOMException on Marko 5.33.14

Question

Uncaught DOMException on Marko 5.33.14

xtremespb opened this issue 2 months ago · comments

Mikhail Matveev commented 2 months ago

Marko Version: 5.33.14

The issues can be reproduced with this version.

Details

After the upgrade from 5.33.13, I see an error message in browser console. Website stops rendering.

Expected Behavior

No errors, as on 5.33.14

Actual Behavior

Error message:

Uncaught DOMException: Failed to execute 'createElementNS' on 'Document': The qualified name provided is empty. at y.bm_ (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:31445) at l (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:36671) at z (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:38003) at A (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:36969) at z (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:38898) at l (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:36781) at z (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:38003) at l (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:36781) at z (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:38003) at A (https://demo.hereticjs.org/heretic/npm.6e6268443d1e2ee90d8a.js:1:36969)

Possible Fix

Downgrade to 5.33.13

Additional Info

Your Environment

Chromium 119.0.6045.199
Operating System and version (desktop or mobile): MacOS Sonoma 14.4.1
Link to your project: https://github.com/hereticjsorg/heretic

Steps to Reproduce

git clone https://github.com/hereticjsorg/heretic.git
npm i && npm run configure && npm run build -- --dev (UPD: forgot to run the configure script)
npm run server
Go to http://127.0.0.1:3001 (no error)
npm i marko@5.33.14
npm run build -- --dev
npm run server
Error message in browser console will appear

Stack Trace

Mikhail Matveev · Answer 1 · Fri Apr 12 2024 14:47:18 GMT+0800 (China Standard Time)

Same for 5.33.15

Dylan Piercey · Answer 2 · Sun Apr 14 2024 09:31:53 GMT+0800 (China Standard Time)

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

> heretic@1.2.10 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'

Mikhail Matveev · Answer 3 · Sun Apr 14 2024 13:33:20 GMT+0800 (China Standard Time)

@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 marko@5.33.15 --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 marko@5.33.15 --save command, it will run Marko 5.33.13, and there will be no problems.

Dylan Piercey · Answer 4 · Mon Apr 15 2024 04:19:45 GMT+0800 (China Standard Time)

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

> heretic@1.2.10 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

Mikhail Matveev · Answer 5 · Mon Apr 15 2024 14:18:21 GMT+0800 (China Standard Time)

@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.

Dylan Piercey · Answer 6 · Tue Apr 16 2024 03:14:13 GMT+0800 (China Standard Time)

@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.

Dylan Piercey · Answer 7 · Tue Apr 16 2024 10:50:06 GMT+0800 (China Standard Time)

@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?

Milo Casagrande · Answer 8 · Tue Apr 16 2024 14:28:03 GMT+0800 (China Standard Time)

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.

Mikhail Matveev · Answer 9 · Tue Apr 16 2024 16:17:23 GMT+0800 (China Standard Time)

@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:

git clone https://github.com/hereticjsorg/heretic.git
cd heretic
npm i
npm i marko@5.33.15 --save
npm run configure
Edit the ./site/etc/system.js file and set markoDebug to true in order to enable MARKO_DEBUG
npm run build -- --dev
npm run server

Thank you!

Dylan Piercey · Answer 10 · Tue Apr 16 2024 20:25:18 GMT+0800 (China Standard Time)

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

Milo Casagrande · Answer 11 · Tue Apr 16 2024 20:55:07 GMT+0800 (China Standard Time)

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.

Dylan Piercey · Answer 12 · Wed Apr 17 2024 01:12:12 GMT+0800 (China Standard Time)

@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?

Mikhail Matveev · Answer 13 · Wed Apr 17 2024 01:39:15 GMT+0800 (China Standard Time)

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

Milo Casagrande · Answer 14 · Wed Apr 17 2024 22:43:59 GMT+0800 (China Standard Time)

@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>

Milo Casagrande · Answer 15 · Wed Apr 17 2024 23:06:49 GMT+0800 (China Standard Time)

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).