Storybook can't run within an ESM package

[ocavue]

Describe the bug

I can't run the storybook within an ESM package ("type": "module" in package.json).

To Reproduce

https://github.com/issueset/storybook-esm-issue

$ git clone https://github.com/issueset/storybook-esm-issue.git
$ cd storybook-esm-issue
$ yarn 
$ yarn storybook

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/code/play/storybook-esm-issue/.storybook/main.js from /Users/code/play/storybook-esm-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/code/play/storybook-esm-issue/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!
ERR!     at interopRequireDefault (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:71)
ERR!     at async buildDev (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-server/dist/cjs/build-dev.js:160:5)
ERR!  Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/code/play/storybook-esm-issue/.storybook/main.js from /Users/code/play/storybook-esm-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/code/play/storybook-esm-issue/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!
ERR!     at interopRequireDefault (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:71)
ERR!     at async buildDev (/Users/code/play/storybook-esm-issue/node_modules/@storybook/core-server/dist/cjs/build-dev.js:160:5) {
ERR!   code: 'ERR_REQUIRE_ESM'
ERR! }

System

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.9.1 - /opt/homebrew/bin/node
    Yarn: 3.0.2 - /opt/homebrew/bin/yarn
    npm: 7.21.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-actions: ^6.4.0-beta.1 => 6.4.0-beta.1
    @storybook/addon-docs: ^6.4.0-beta.1 => 6.4.0-beta.1
    @storybook/addon-essentials: ^6.4.0-beta.1 => 6.4.0-beta.1
    @storybook/addon-links: ^6.4.0-beta.1 => 6.4.0-beta.1
    @storybook/react: ^6.4.0-beta.1 => 6.4.0-beta.1

Additional context

Since Storybook will remove CJS in 7.0 itself, then I expect it has a better support to an ESM-only project. Or at least has better document about how to use storybook in an ESM-only project.

[kylegach]

Hi, @ocavue. I just merged #16184 that should prevent this in the future. For your case, if you follow the directions in that error message (rename main.js to end in .cjs), it should clear up.

[rodoabad]

That circumvents the issue though because we still need to run main in CommonJS. Is there a timeline when Storybook will work with pure ES packages?

[rodoabad]

Wen switching to cjs SB throws a warning > Unable to find main.js:

[binarykitchen]

So what's the solution to make it work? Still cannot import an ESM package into some storybooks here.

[tyler-boyd]

@binarykitchen I was able to get it working by creating an empty .storybook/package.json: {}. The only caveat is you have to make sure your svelte.config.js is actually svelte.config.cjs and uses require, not import. For me this was a trivial change.

I do suspect it's a bug in storybook that we can't just name the file main.cjs.

[vamcs]

Running Storybook v6.4.18 and renaming the extension to main.cjs works even though the warning Unable to find main.js is thrown. I could check that main.cjs actually runs and the warning doesn't interfere in the functionality.

[certainlyakey]

I was able to get it working by creating an empty .storybook/package.json: {}.

@tyler-boyd Worked for me with SvelteKit 1.0.0-next.320, but apart from this change i had to replace require('../svelte.config.js') with import('../svelte.config.js') in main.js and install babel-plugin-transform-vite-meta-env whose absence came up in an error when running npm run storybook.

Didn't need to rename svelte.config.js though.

[rogerleung0411]

Why this issue closed?..
Version 6.4.22 still has bad development experience in esm + typescript packages. 🙁

[Hideman85]

Still not working for me neither, I have the builder-vite, my confing in TypeScript and my project in ESM and I cannot start storybook.

(node:10329) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js
require() of ES modules is not supported.
require() of node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js from .storybook/main.ts 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 regeneratorRuntime.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from node_modules/@babel/runtime/helpers/esm/package.json.

[sartoshi-foot-dao]

Changing file extension .storybook/main.js to .storybook/main.cjs and replacing any require() with import() in main.cjs (as per error instructions) allowed storybook to launch successfully in Typescript ESM project.

[Hideman85]

Then you lose the benefit of ts. We try to avoid any commonjs file in our project.
But today it is working by using main.ts with imports just at then end you have to use module.exports = config otherwise you get the babel helpers injected and this is where you are getting the complication.
I guess the best practice would be to avoid default exports, that is the "only" real issue.

I would still prefer a complete support of ESM by storybook to avoid these tricky workaround that no one knows the exact working solution.

[MatthD]

Same issue for me, a lot of errors with storybook 6.5.7 NodeV16 Main.ts file with vue3 project

I need to change 2 files to fix:

• ./storybook/main.ts by removing export default and use module.export
• postcss.config.ts by removing export default and use module.export too !

BUT now I am not able to import anything inside the postcss.config.ts