SyntaxError: The requested module 'safe-stable-stringify/index.js' does not provide an export named 'default'

[milahu]

vite bundler breaks with esm/wrapper.js and index.js

import { configure } from './safe-stable-stringify/esm/wrapper.js'

SyntaxError: The requested module safe-stable-stringify/index.js does not provide an export named 'default'

import { configure } from './safe-stable-stringify/index.js'

SyntaxError: The requested module 'safe-stable-stringify/index.js' does not provide an export named 'configure'

moved from #19 (comment)

related #32

[BridgeAR]

Thanks for the report. To me this seems to be an issue with the bundler itself and not with this module. It should work fine as the default export is defined.

[milahu]

no time investigate, closing

[zernie]

Next js 14.0.2 does the same

[adamsmasher]

The issue here - if I understand this correctly, and this is Javascript so I don't feel confident about this - is that the support for ESM in this package is, AFAICT, superficial.

There's a "wrapper" ESM module, which just imports the CJS module as though it were an ES Module, and then re-exports. If your code isn't being fed through a build process that somehow makes it OK to use the import statement on CommonJS files, this is going to fail when you try to import it.

I believe what you want is some kind of build process setup wherein the original source file can be compiled into two distributable modules, one for CommonJS and one for ESM.

[BridgeAR]

The interoperability is a tricky thing in general. Do you have a simple setup that will fail for reproduction?

I explicitly would rather not use a build system, while I would first rather look into situations where it fails and why. I can also imagine improving it in a different spot as it would allow others to benefit from that as well.

[adamsmasher]

It's contrived, but you can reproduce this with a minimal Vite configuration using optimizeDeps.exclude to keep Vite from pre-processing the dependency. Use npm create vite@latest to create a vanilla project, then create a vite.config.js in the project root:

export default {
  optimizeDeps: {
    exclude: ['safe-stable-stringify']
  }
}

Then just add import stringify from 'safe-stable-stringify' to src/main.js, and run npm run dev. When you try to access the page it's serving in Chrome, it'll fail to load, and in the console you'll see:

Uncaught SyntaxError: The requested module '/node_modules/safe-stable-stringify/index.js?v=41f92073' does not provide an export named 'default' (at wrapper.js?v=41f92073:1:8)

[pveierland]

Had this issue when using safe-stable-stringify from a library built with wasm-pack that is used in a Vite project. The following workaround worked for me:

mkdir safe-stable-stringify-esm
curl https://esm.sh/safe-stable-stringify@2.5.0/es2022/safe-stable-stringify.mjs -o safe-stable-stringify-esm/index.mjs

Add the following package.json inside safe-stable-stringify

{
  "name": "safe-stable-stringify-esm",
  "version": "2.5.0",
  "type": "module",
  "exports": "./index.mjs"
}

Then add file:./safe-stable-stringify-esm as a dependency to your project.