[Bug] Fails to start storybook

[chrisolsen]

What version of vite are you using?

3.2.5

System info and storybook versions

System: OS: Linux 5.15 Zorin OS 16.2 CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm Browsers: Firefox: 107.0 npmPackages: @storybook/addon-essentials: ~6.5.9 => 6.5.15 @storybook/builder-vite: 0.2.5 => 0.2.5 @storybook/core-server: ~6.5.9 => 6.5.15 @storybook/react: ~6.5.9 => 6.5.15

Describe the Bug

npx create-nx-workspace

pnpm install @nrwl/react --save-dev
pnpm install @nrwl/storybook --save-dev

pnpm exec nx g @nrwl/react:library docs
pnpm exec nx g @nrwl/react:storybook-configuration docs

pnpm exec nx storybook docs

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/chris/Code/ui-nx/ui-components-npm/node_modules/react-docgen/dist/main.js from /home/chris/C
ode/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/plugins/react-docgen.js not supported.                                           
ERR! Instead change the require of main.js in /home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/plugins/react-docgen.j
s to a dynamic import() which is available in all CommonJS modules.                                                                                    
ERR!     at Object.<anonymous> (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/plugins/react-docgen.js:8:24)       
ERR!     at /home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-config.js:236:85                                   
ERR!     at async pluginConfig (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-config.js:236:37)              
ERR!     at async commonConfig (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-config.js:66:18)               
ERR!     at async createViteServer (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-server.js:10:24)           
ERR!     at async Object.start (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/index.js:64:14)                     
ERR!     at async Promise.all (index 0)                                    
ERR!     at async storybookDevServer (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/core-server/dist/cjs/dev-server.js:203:28)      
ERR!     at async buildDevStandalone (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)       
ERR!     at async buildDev (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)                  
ERR!  Error [ERR_REQUIRE_ESM]: require() of ES Module /home/chris/Code/ui-nx/ui-components-npm/node_modules/react-docgen/dist/main.js from /home/chris/
Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/plugins/react-docgen.js not supported.                                          
ERR! Instead change the require of main.js in /home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/plugins/react-docgen.j
s to a dynamic import() which is available in all CommonJS modules.        
ERR!     at Object.<anonymous> (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/plugins/react-docgen.js:8:24)       
ERR!     at /home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-config.js:236:85                                   
ERR!     at async pluginConfig (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-config.js:236:37)              
ERR!     at async commonConfig (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-config.js:66:18)               
ERR!     at async createViteServer (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/vite-server.js:10:24)           
ERR!     at async Object.start (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/builder-vite/dist/index.js:64:14)                     
ERR!     at async Promise.all (index 0)                                    
ERR!     at async storybookDevServer (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/core-server/dist/cjs/dev-server.js:203:28)      
ERR!     at async buildDevStandalone (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)       
ERR!     at async buildDev (/home/chris/Code/ui-nx/ui-components-npm/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5) {                
ERR!   code: 'ERR_REQUIRE_ESM' 

Link to Minimal Reproducible Example

https://github.com/chrisolsen/vite-storybook-issue

I have also tried getting two bare bones project working, using both pnpm and npm, but get the same error posted above for both cases.

Participation

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

[IanVS]

Please try upgrading to version 0.2.6 of this package. The latest version of react-docgen went to ESM only, which causes us trouble. Version 0.2.6 pins it to the version that works correctly.

[chrisolsen]

Thanks Ian, that helped. After updating to v0.2.6 I then got the error

error:0308010C:digital envelope routines::unsupported

Setting NODE_OPTIONS=--openssl-legacy-provider then allows storybook to start up, but I am not sure if there is a better solution or not.

[IanVS]

The other solution if you're using node 18 is to upgrade to storybook 7.0, currently in beta. npx sb@next upgrade --prerelease

[nazmiboxed]

Could we document this in the doc please. It took me hours figuring out this error before finding this issue. 😞

[IanVS]

Which error do you mean, @nazmiboxed? The original one should no longer be an issue. We can document the node.js 18 limitation though.