[Bug] Cannot start storybook with newly generated project

[ahnpnl]

What version of vite are you using?

3.0.0

System info and storybook versions

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.16.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/builder-vite: ^0.2.0 => 0.2.0 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/vue3: ^6.5.9 => 6.5.9

Describe the Bug

• Follow the guide https://github.com/storybookjs/builder-vite#getting-started-with-vite-and-storybook-on-a-new-project (I chose template vue-ts for Vite)
• Starting Storybook I ran into this exception

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/anh.pham/my-vue-app/.storybook/main.js from /Users/anh.pham/my-vue-app/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/anh.pham/my-vue-app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Link to Minimal Reproducible Example

https://github.com/ahnpnl/vite-sb-ts

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Thanks, Vite 3 is adding "type": "module" to the package.json of projects it creates now. So to use commonjs, it is necessary to use the .cjs extension. We'll need to update the storybook generator to do that automatically, but for now you can rename the file as the error suggests. Thanks for reporting.

[IanVS]

Here's a PR to fix the underyling issue: storybookjs/storybook#18714.

[AlexMachin1997]

Hey @IanVS

You don't happen to know if that fix has been released or when it's going to be released ?

Thanks,
Alex

[IanVS]

I'm not sure. @shilman do you have any kind of timeline for releasing 6.5.10?

[patoncrispy]

Even renaming the file to .cjs doesn't seem to work for me. If I rename main.js to main.cjs it gets passed this issue but I then get Error: Cannot find module '@rollup/pluginutils'.

[IanVS]

@patoncrispy thanks I'll fix that soon too. In the meantime, you can install it manually if you'd like.

[IanVS]

Or, if you'd like to submit a PR that adds it as a dependency to this project, feel free. Otherwise, I'll try to take care of it tomorrow or the next day.

[IanVS]

Closed by storybookjs/storybook#18714 and #459, just waiting for releases.

[AlexMachin1997]

Has this fix been released ? I've updated the storybook package but I'm still running into the same issue as before

[IanVS]

The fix is for new projects. You can fix the issue in existing projects by changing the extension of main.js to main.cjs.

[AlexMachin1997]

Hmm strange, I just generated a new project and I'm still getting the error (See screenshot below)

Even when I update the main.js to main.cjs I get the error (See sreenshot below)

FYI this is with a brand new project just installed, I've setup a react and vite project and re-ran the initialiation for storybook.

[IanVS]

I think you're using an unsupported version of node. Are you able to use the latest 16 or 18 version?

[AlexMachin1997]

Bit of a weird issue this.

So I had node v17.4.0 so I installed the latest version of node which is 18.8.0 currently, however, the issue was still present.

So I downgraded to the LTS version which is currently 16.16.0 and weirdly fixed this issue I can successfully load storybook.

Wonder why it didn't work with the latest version, it's a little concerning as Storybook could break in a future version of nodejs.

[IanVS]

Thanks for reporting back. It's being addressed in the upcoming 7.0 version of storybook. The error is coming from webpack 4, which storybook will no longer use.

[AlexMachin1997]

Seems to be all working now.

Weird how you need to change main.js to main.cjs.

[IanVS]

Glad it's working.

Weird how you need to change main.js to main.cjs.

That is the way that node works. If you have "type": "module" in your package.json file, then node will treat all .js files as ESM. But the storybook config is written in commonjs, so it needs to have an explicit .cjs extension so node knows how to deal with it.

[RodrigoNovais]

How exactly does this fix work for typescript projects?

[IanVS]

@RodrigoNovais, for now, I'd recommend against trying to use typescript for your storybook config files (.storybook/main.ts). It will be fully supported in storybook 7.0, but for now it's difficult to get working correctly.

But, other files like components and stories can still use typescript just fine. It's only the storybook config files that aren't great.

[RodrigoNovais]

I am sorry, that's not what I meant.
I just created a new project for react + typescript using vite and would like to know how to make it work with storybooks.
Removing "type": "module" from package.json seems not to be an option

[IanVS]

@RodrigoNovais mind opening a new issue describing the problem you're seeing?

[RodrigoNovais]

@IanVS I'll be doing that as soon as I can