Sveltejs/kit 1.0.0-next.526 and above Incompatible with svelte-jsoneditor

[ZaxyxaZ]

Updating to the latest version of "sveltejs/kit" above 1.0.0-next.525 version results in error while working with "svelte-jsoneditor" , The following error is displayed on the chrome developer console and app fails to start:

SyntaxError: The requested module '/node_modules/json-source-map/index.js?v=fda884be' does not provide an export named 'default' (at jsonUtils.js?v=fda884be:2:8)

Also surfaces in VSCode console as E:/dev/src/sveltekit/example-app/node_modules/ajv-dist/dist/ajv7.min.js" points to missing source files. As a result - the application never starts.

[josdejong]

Thanks for reporting.

I created a fresh new sveltekit project (with @sveltejs/kit@1.0.0-next.532), installed svelte-jsoneditor, add the
<JSONEditor ... /> component in +page.svelte (using VS Code), started a dev server, and opened it in Chrome. I do not see any of the warnings that you report so I guess I'm missing something?

How can I reproduce this issue?

[ZaxyxaZ]

We did similar from scratch and added our application but have the same issue. What version of node are you using?We are using DaisyUI with Tailwinds. Those are the only other dependencies. We have tried similar approach with separate developers and get same problem.When we comment out the JSON-editor the app works fine. On Nov 4, 2022, at 6:49 AM, Jos de Jong ***@***.***> wrote: Thanks for reporting. I created a fresh new sveltekit project installed svelte-jsoneditor, add the <JSONEditor ... /> component in +page.svelte (using VS Code), started a dev server, and opened it in Chrome. I do not see any of the warnings that you report so I guess I'm missing something? How can I reproduce this issue? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[josdejong]

Is it possible to create a minimal demo of the problem? Like a codesandbox example or so?

[ZaxyxaZ]

Additional debug information from browser console:

client-manifest.js:18 SyntaxError: The requested module '/node_modules/json-source-map/index.js?v=e2e2c781' does not provide an export named 'default' (at jsonUtils.js?v=e2e2c781:2:8)

In the referenced source file:

import jsonSourceMap from '/node_modules/json-source-map/index.js?v=e2e2c781'; (Shows error)

[seandlg]

I'm seeing the same issue, but struggling to reproduce it. Will post an update once I manage to reproduce something..

[seandlg]

It looks to me like a weird race condition. I can sometimes trigger the issue, by toggling SSR at the +layout.js-level, but I can't make it reproducible. I suspect it is related to vitejs.. In the course of debugging the issue, I did notice a wrong type import from svelte-jsoneditor, so I cannot rule out that this played a part..

[ZaxyxaZ]

We thought about that…the app is driven by our back end APIs. One option could be to have a Webex were we walkthrough. Let us know if interested.It may take some time to create a stub example but will discuss with the dev team tomorrow.On Nov 6, 2022, at 2:26 PM, Jos de Jong ***@***.***> wrote: Is it possible to create a minimal demo of the problem? Like a codesandbox example or so? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[ZaxyxaZ]

I’m only getting type and missing references. We are only using CSR in our app.Just to reiterate. This all started happening in v526 of SvelteKit. They did change some package references in that release. I tried to get Rich to look at it but he just closed the ticket suggesting it was not reproducible on his end. On Nov 6, 2022, at 4:12 PM, Sean Eulenberg ***@***.***> wrote: It looks to me like a weird race condition. I can sometimes trigger the issue, by toggling SSR at the +layout.js-level, but I can't make it reproducible. I suspect it is related to vitejs.. In the course of debugging the issue, I did notice a wrong type import from svelte-jsoneditor, so I cannot rule out that this played a part.. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[josdejong]

I can sometimes trigger the issue, by toggling SSR at the +layout.js-level

I did try that out, but still can't reproduce this at all 🤔 .

In the course of debugging the issue, I did notice a wrong type import from svelte-jsoneditor

Is this an issue in the library? If so, what is the bug? That sounds like easily solvable

[gauravrawat440]

that
well @seandlg is right about the toggling the ssr at +layout.js , toggling it seems to have resolved the issue. The issue occurs from the dependency that is "json-source-map". the error is as follows:

SyntaxError: The requested module '/node_modules/json-source-map/index.js?v=fda884be' does not provide an export named 'default

[ZaxyxaZ]

I think we have nailed down the issue to some sort of Vite compilation / dependency issue. The problem can be resolved after toggling SSR. First, you have to wait for the failure. Then go into the source (+layout.js) and reset to the opposite value (in our case true) and then when the application error resolves restart the server and it works. Here is terminal output from Vite.

[vite] ✨ new dependencies optimized: immutable-json-patch, lodash-es, @fortawesome/free-regular-svg-icons, ajv-dist, jmespath, ...and 16 more
2:44:54 PM [vite] ✨ optimized dependencies changed. reloading

Clearly this "optimization" needs to occur prior to a failure.

[ZaxyxaZ]

@josdejong Looks like this is a Vite dev mode issue not resolving all dependencies. If any one else has issues just build and preview the app.

[bluwy]

I'm guessing svelte-jsoneditor is being added to optimizeDeps.exclude in vite.config.js? (Should be removed) Otherwise we'd need a repro to look into this.

[josdejong]

I've had quite some issues related to non-ESM dependencies in the past, in the early days of SvelteKit+Vite, see for example this workaround: #121 (comment). I haven't seen much issues lately though.

Does a workaround with optimizeDeps.exclude work in this case?