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: https://github.com/josdejong/svelte-jsoneditor/issues/121#issuecomment-1215598726. I haven't seen much issues lately though.

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

[ZaxyxaZ]

@josdejong I think you were on the right track. The exclude parameter had no effect. And the messages out of Vite led me to think including up front might have an effect. I started adding the modules that Vite was reoptimizing one by one and this combination has addressed the dependency issue. Obviously, there is still a Vite issue to be dealt with but now there is at least a decent temporary work around. Added to vite.config.js:

  optimizeDeps: {
    include: [
      'ajv-dist', 
      'immutable-json-patch',
      'lodash-es',
      '@fortawesome/free-regular-svg-icons',
      'jmespath'
    ]
  }

[josdejong]

ahh, wow, that helps a lot! Thanks for sharing this workaround.

This makes sense (though it is a pity that this workaround is needed). I'm a bit surprised that for example lodash-es is needed, since that is a modern ESM only package.

[seandlg]

@josdejong I think you were on the right track. The exclude parameter had no effect. And the messages out of Vite led me to think including up front might have an effect. I started adding the modules that Vite was reoptimizing one by one and this combination has addressed the dependency issue. Obviously, there is still a Vite issue to be dealt with but now there is at least a decent temporary work around. Added to vite.config.js:

  optimizeDeps: {
    include: [
      'ajv-dist', 
      'immutable-json-patch',
      'lodash-es',
      '@fortawesome/free-regular-svg-icons',
      'jmespath'
    ]
  }

This does not work for me, but you are right in the observation that the bug seems to be devserver related. I guess I'll wait for a few days/weeks and see if the problem evaporates with further updates to vite, since I fail to create a reproducible example 🤷

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

This was a mistake on my end. svelte-jsoneditor is awesome! :-)

[ZaxyxaZ]

ahh, wow, that helps a lot! Thanks for sharing this workaround.

This makes sense (though it is a pity that this workaround is needed). I'm a bit surprised that for example lodash-es is needed, since that is a modern ESM only package.

Don't disagree - but was only following the bread crumbs left by the console output from Vite. I will say @seandlg that this fix is very specific to the set of packages we are using. As such the exact includes will be different if others run into this same issue.

[AlexRMU]

It didn't help me either. Maybe you need to create a issue in vite?

[josdejong]

I've described the workaround for this issue in the readme in a new section "Known issues". Besides that, I don't think this issue is actionable, I'll close this issue now. Feel free to reopen if needed.