Storybook can't run within an ESM package

ocavue commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

binarykitchen commented 2 years ago

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

tyler-boyd commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Hideman85 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

storybookjs / storybook

Storybook can't run within an ESM package #16181