Kit Packaged libs don't work outside of dev

[ghostdevv]

Describe the bug

One of my packages svelte-copy, which uses svelte kit package, fails to build when using netlify. I build a repro here. I get the error of Must use import to load ES Module: /var/task/node_modules/svelte-copy/index.js

I tracked this down to .netlify/server/entries/pages/index.svelte.js which has the line var import_svelte_copy = require("svelte-copy")

Reproduction

https://github.com/ghostdevv/svelte-copy-require-repro

Logs

500
Must use import to load ES Module: /var/task/node_modules/svelte-copy/index.js
require() of ES modules is not supported.
require() of /var/task/node_modules/svelte-copy/index.js from /var/task/.netlify/server/entries/pages/index.svelte.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 /var/task/node_modules/svelte-copy/package.json.
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/node_modules/svelte-copy/index.js
require() of ES modules is not supported.
require() of /var/task/node_modules/svelte-copy/index.js from /var/task/.netlify/server/entries/pages/index.svelte.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 /var/task/node_modules/svelte-copy/package.json.

System Info

Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.9.1/bin/yarn
    npm: 7.24.2 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Brave Browser: 99.1.36.116
    Chromium: 99.0.4844.74
    Firefox: 98.0.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[ghostdevv]

Turns out that svelte-kit package uses exports when it builds but it keeps the "type": "module" in it's package.json, so therefore it breaks when people consume the library. I am having this on multiple packages now

Unrelated to netlify specifically so have updated title

[dummdidumm]

I'm not sure we can do much here. This sounds like an issue with the importer side. "type": "module" is correct since the packages are published in esm format (using import statementc etc). Since it's esm, it can't be required, and the question is why Netlify and others do that. What are these other cases you are talking about specifically?

[bluwy]

A solution is to configure config.kit.vite.ssr.noExternal: ['svelte-copy']. This would bundle svelte-copy into the final bundle, which skips the Netlify build to load the ESM library. Ideally, the Netlify build should be in ESM, but I remember that was changed down the line and it requires this change for pure ESM libraries.

[dominikg]

hmm, should vite-plugin-svelte handle that automatically? It feels like packages created with svelte-kit package should work with our own adapters ootb without requiring users to reach for workarounds.

[bluwy]

svelte-copy is a pure JS library (without Svelte components), so vite-plugin-svelte doesn't handle that automatically. Maybe a note of adapter-netlify producing CJS builds, and user have to be aware of pure ESM packages could be documented. Or if we can produce ESM builds for netlify.

[ghostdevv]

I think I might be misunderstood @dominikg @bluwy @dummdidumm - the issue is that svelte-kit pacakge builds for a non esm target despite shipping a package.json with type module. So that is why exports is not defined since you can't have the package be a module when it's built for esm

the fix's I found for this:

• svelte-kit package should build for esm (I did this by setting target to esnext in tsconfig.compilerOptions.target, though you might run into Ensure .js extensions are present with Typescript 5 cli#205 and have to add .js to all your imports)

• remove type module in the pacakge.json that svelte-kit package generates

[Rich-Harris]

closed via #4791