[Bug]: Storybook build and dev server not working after updating to Node.js 18

[dcastil]

Describe the bug

After I updated from Node.js 16 to 18, the storybook-build command fails with following error message:

transforming (40) node_modules/@storybook/addon-interactions/dist/esm/preset/preview.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/dany/code/tests/storybook-test/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/dany/code/tests/storybook-test/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/dany/code/tests/storybook-test/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/dany/code/tests/storybook-test/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/dany/code/tests/storybook-test/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/dany/code/tests/storybook-test/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/dany/code/tests/storybook-test/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/dany/code/tests/storybook-test/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/dany/code/tests/storybook-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/dany/code/tests/storybook-test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/dany/code/tests/storybook-test/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

To Reproduce

Run this in the CLI:

yarn create vite storybook-test --template react-ts
cd storybook-test
# Remove `type: module` from package.json
npx storybook init
yarn build-storybook
# Last command should fail with error message from above

System

Environment Info:

  System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.12.0 - /usr/local/bin/node
    Yarn: 1.22.17 - ~/.npm-global/bin/yarn
    npm: 8.19.2 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 107.0.5304.62
    Firefox: 106.0.2
    Safari: 16.1
  npmPackages:
    @storybook/addon-actions: ^6.5.13 => 6.5.13 
    @storybook/addon-essentials: ^6.5.13 => 6.5.13 
    @storybook/addon-interactions: ^6.5.13 => 6.5.13 
    @storybook/addon-links: ^6.5.13 => 6.5.13 
    @storybook/builder-vite: ^0.2.5 => 0.2.5 
    @storybook/react: ^6.5.13 => 6.5.13 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

The problem seems to be due to a change in the OpenSSL API in Node 17. There is a workaround for this: Run Node.js with the option --openssl-legacy-provider, e.g. by adding the environment variable NODE_OPTIONS=--openssl-legacy-provider.

Possibly related:

• Digital library routines createHash ERR_OSSL_EVP_UNSUPPORTED #18733
• Node 18 Support chromaui/chromatic-cli#628

[CraigWatt]

downgrading node to v16.13.0 avoids the error for me. Not really a valid solution though...

I'm also using M1 Mac... Is that somehow related to issue?

[dcastil]

I just noticed that the Storybook dev server also doesn't work in Node.js 18. I updated the issue description to include that.

[CraigWatt]

Looking around this does seem to be a node/webpack specific issue...

I guess I would want to ask anyone using storybook, are they able to run / build storybook using node 17 or 18 at all?

Does everyone just use Node 16?

[CraigWatt]

I'm currently checking the following in storybook docs... https://storybook.js.org/docs/react/builders/webpack

[CraigWatt]

Bingo! i think this solves it. by default storybook uses Webpack 4. if you set storybook to use Webpack 5, i am able to run yarn storybook on node v18.2.0

https://storybook.js.org/docs/react/builders/webpack

@dcastil can you let me know if this solves the issue for you too?

I followed these instructions from the docs:

"

Webpack 5
Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (i.e., @storybook/builder-webpack5, @storybook/manager-webpack5) and update your Storybook configuration as follows:

// .storybook/main.js

module.exports = {
  core: {
    builder: 'webpack5',
  },
};

"

[dcastil]

Hey @CraigWatt! Ah nice that it works with webpack5. Unfortunately I can't switch to it in my app because we're using the Vite builder which forces us to use @storybook/builder-vite for Storybook. But I guess that makes this a problem in the Vite builder rather than Storybook itself.

After some searching I also came along a definitive answer to the problem in storybookjs/builder-vite#414 (comment):

Unfortunately webpack 4 will not be updated to support node 17: webpack/webpack#14532 (comment). And the storybook manager is currently always built with webpack 4. This will change in Storybook 7, which will use webpack 5 and no longer support webpack 4. So my recommendation for now is to use node 16 or the --openssl-legacy-provider flag, until Storybook v7 is released.

This means we need to wait for Storybook v7 for this to get resolved and use the workarounds in the meantime.

[oseisaac]

This was the solution for me

NODE_OPTIONS=--openssl-legacy-provider

"start": "NODE_OPTIONS=--openssl-legacy-provider npm run storybook",