[Bug] Builder error with storybook 6.5.9

What version of vite are you using?

6.5.9

System info and storybook versions

System: OS: Windows 10 10.0.19044 CPU: (12) x64 Intel® Core™ i7-10750H CPU @ 2.60GHz Binaries: Node: 18.4.0 - ~\scoop\persist\nvm\nodejs\nodejs\node.EXE npm: 8.12.1 - ~\scoop\persist\nvm\nodejs\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44) npmPackages: @storybook/addon-a11y: ^6.5.9 => 6.5.9 @storybook/addon-actions: ^6.5.9 => 6.5.9 @storybook/addon-essentials: ^6.5.9 => 6.5.9 @storybook/addon-links: ^6.5.9 => 6.5.9 @storybook/addon-notes: ^5.3.21 => 5.3.21 @storybook/addon-postcss: ^2.0.0 => 2.0.0 @storybook/addons: ^6.5.9 => 6.5.9 @storybook/builder-vite: ^0.1.36 => 0.1.36 @storybook/builder-webpack5: ^6.5.9 => 6.5.9 @storybook/csf-tools: ^6.5.9 => 6.5.9 @storybook/manager-webpack5: ^6.5.9 => 6.5.9 @storybook/theming: ^6.5.9 => 6.5.9 @storybook/vue3: ^6.5.9 => 6.5.9

Describe the Bug

When switching my working project from webpack5 to vite I get this error

info @storybook/vue3 v6.5.9 storybook C:\Projects\euronet\web\mono\vue\packages\portal
info                       ger-cache
info => Loading presets
info => Serving static files from ./.\public at /
info => Loading custom manager config

info => Cleared cached manager config
i ｢wdm｣: wait until bundle finished: 
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\webpack@4.46.0\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\webpack@4.46.0\node_modules\webpack\lib\NormalModule.js:417:16)      
    at handleParseError (C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\webpack@4.46.0\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\webpack@4.46.0\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\webpack@4.46.0\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\loader-runner@2.4.0\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\loader-runner@2.4.0\node_modules\loader-runner\lib\LoaderRunner.js:214:10)  
    at iterateNormalLoaders (C:\Projects\euronet\web\mono\vue\node_modules\.pnpm\loader-runner@2.4.0\node_modules\loader-runner\lib\LoaderRunner.js:221:10) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.4.0
 ELIFECYCLE  Command failed with exit code 1.

main.js

module.exports = {
  core: {
    builder: '@storybook/builder-vite',
  },
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
}

Link to Minimal Reproducible Example

No response

Participation

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

[IanVS]

@viveleroi if you need to use node 18, I’d recommend trying out storybook 7, which does not use webpack at all if you’re using a vite framework. You can run npx sb@next upgrade --prerelease to try out the latest v7 alpha release.

[blowsie]

@IanVS Its worth noting that in newer versions of Node (I think 18.5.0) this option --openssl-legacy-provider is no longer supported. So It seems that Vite Storybook is now stuck on older versions