"Must use import to load ES Module" Svelte-kit

[Star3Lord]

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\nikhi\Documents\Projects\portfolio\node_modules.pnpm\svelte-modals@1.0.1\node_modules\svelte-modals\index.js require() of ES modules is not supported. require() of C:\Users\nikhi\Documents\Projects\portfolio\node_modules.pnpm\svelte-modals@1.0.1\node_modules\svelte-modals\index.js from C:\Users\nikhi\Documents\Projects\portfolio\node_modules.pnpm\vite@2.4.3\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\nikhi\Documents\Projects\portfolio\node_modules.pnpm\svelte-modals@1.0.1\node_modules\svelte-modals\package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at nodeRequire (C:\Users\nikhi\Documents\Projects\portfolio\node_modules\.pnpm\vite@2.4.3\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:73417:17)
at ssrImport (C:\Users\nikhi\Documents\Projects\portfolio\node_modules\.pnpm\vite@2.4.3\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:73369:20)
at eval (/src/lib/components/modals/Test.svelte:7:31)
at instantiateModule (C:\Users\nikhi\Documents\Projects\portfolio\node_modules\.pnpm\vite@2.4.3\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:73402:166)

[mattjennings]

This error happens when svelte-modals is a devDependency in your package.json. Move it to dependencies and it should work.

[Star3Lord]

Nope, it still gives the same error.

Edit: Moving it to dependencies doesn't help if I still use it in SSR component. I would appreciate if you fix the library, once and for all, to work with svelte-kit

[mattjennings]

Can you create a reproduction repo? I'll take a look.

[Star3Lord]

https://github.com/Star3Lord/svelte-modals-test

[mattjennings]

The build works for me when moving svelte-modals to dependencies. Did you restart the server when you moved it?

Additionally, I just discovered this tonight, but you'll also need to add

    vite: {
      optimizeDeps: {
        exclude: ['svelte-modals'],
      },
    }

under kit in your svelte.config.js or else modals won't open. I'll add a SvelteKit section to the docs to cover both of these things.

[Star3Lord]

It still doesn't work. I am pretty sure this is a packaging issue. Make sure your library uses complete ESM and not CommonJS.

[mattjennings]

This library itself is developed and packaged using SvelteKit, and the docs are hosted in SvelteKit. It is ESM compatible. I will continue to look into it, but your repo works for me so I am not sure how you are continuing to run into the problem.

[mattjennings]

Can you try adding this to your svelte.config.js?

vite: {
    ssr: {
        noExternal: ['svelte-modals']
    }
}

[Star3Lord]

That works!

[mattjennings]

Awesome. I think it should be fixed in 1.0.4, I needed to add svelte entrypoint to package.json that should automatically add it to noExternal under the hood. If 1.0.4 works for you then i'll close this!

[Star3Lord]

Yes, v1.0.4 works perfectly now without needing to change svelte.config, thanks. Nice library btw, really useful.

[mattjennings]

Thanks! Glad we were able to get this all figured out.