[from 1.4 to 1.5.2] Error loading hydrate component

[Martin Kinoo]

I will write this issue while I investigate, sorry if it looks messy.

Step to reproduce:

• upgrade elderjs and svelte
• delete __ELDER__ folder
• add props: { compress: true }
• start the server with yarn run dev

--> my hydrate component have the option loading: eager

Resulting in these error in my console (firefox):

GET http://localhost:3000/_elderjs/props/ejs-642403683.js
[HTTP/1.1 404 Not Found 1ms]

Loading module from “http://localhost:3000/_elderjs/props/ejs-642403683.js” was blocked because of a disallowed MIME type (“”).

Loading failed for the module with source “http://localhost:3000/_elderjs/props/ejs-642403683.js”. gdpr:275:1
Uncaught (in promise) TypeError: error loading dynamically imported module

try to debug and playing with hydrate options

hydrate: html

--> compress: false

Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 625 of the JSON data
    <anonymous> http://localhost:3000/my_page:319

--> compress: true

it's fixed ! And seems to work so far

hydrate: hybrid

--> compress: true or false
Same as original issue

hydrate: file

--> compress: true or false
Same as original issue

Try with esbuild (just in case)

--> same result

[Nick Reese]

Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 625 of the JSON data
http://localhost:3000/my_page:319

I was able to squash this part of the bug, but not the race condition causing the file not to be written in time to be returned by polka. To remedy this, I've changed the hydrateComponents.ts to use all sync functions.

[Martin Kinoo]

1.5.3

without props options

In shell:

[!] Error: 'escape_object' is not exported by node_modules/svelte/internal/index.mjs, imported by node_modules/svelte-forms-lib/lib/components/Form.svelte
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
(...)
[!] Error: 'claim_html_tag' is not exported by node_modules/svelte/internal/index.mjs, imported by src/components/BannerCTA.svelte

Browser:

Loading module from “http://localhost:3000/_elderjs/svelte/components/HomeCarousel.9186e48a.js” was blocked because of a disallowed MIME type (“”).
localhost:3000
Loading module from “http://localhost:3000/_elderjs/svelte/components/SliderWrapper.8722abf3.js” was blocked because of a disallowed MIME type (“”).
localhost:3000
Loading module from “http://localhost:3000/_elderjs/svelte/components/CookieBanner.27dd886a.js” was blocked because of a disallowed MIME type (“”).
localhost:3000
Uncaught (in promise) TypeError: error loading dynamically imported module
Uncaught (in promise) TypeError: error loading dynamically imported module
Uncaught (in promise) TypeError: error loading dynamically imported module

--> same result for any compress and hydrate option

[Nick Reese]

@kiuKisas update your package’s svelte to the latest. This is in the upgrade notes on the docs.

[Martin Kinoo]

forgot to do that, I was in a hurry ^^

1.5.3

No more JSON.parse error, hydrate html with compress true or false result in the same MIME type error and loading failed. If it's a race condition, maybe I was lucky the first time.

[Nick Reese]

@kiuKisas hydrate: “file”? Shouldn’t possibly be a race condition with the html. I can’t recreate this. Can you add some console.logs in hydrateComponents.ts to see if you can find why there would be a race condition with a fs.writeFileSync?

[Martin Kinoo]

So, the correct option is currently hydratation and not hydrate, that's why I had issue with html mode ^^.
hybrid and html work for me, the issue is still there for hydration: file. Hope I'll find time to dig into

[Nick Reese]

@kiuKisas Let me know when you have time to dig into this more. I can't seem to recreate this.