Building storybook locally error: _ws.WebSocketServer

[StuartMorris0]

Describe the bug When trying to run storybook locally with yarn storybook the following error occurs.

info @storybook/react v6.4.9
info 
info => Loading presets
ERR! TypeError: _ws.WebSocketServer is not a constructor

Referenced here: node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/utils/get-server-channel.js:22:28)

To Reproduce Storybook appears to build and run correctly with the build-storybook command, just running our local start-storybook causes the above error. I've tried running on node 14/16 and both cause the same error.

System Environment Info:

System: OS: macOS 11.4 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v16.2.0/bin/yarn npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm Browsers: Chrome: 96.0.4664.93 Firefox: 88.0.1 Safari: 14.1.1 npmPackages: @storybook/addon-a11y: ^6.4.9 => 6.4.9 @storybook/addon-actions: ^6.4.9 => 6.4.9 @storybook/addon-docs: ^6.4.9 => 6.4.9 @storybook/addon-essentials: ^6.4.9 => 6.4.9 @storybook/addon-jest: ^6.4.9 => 6.4.9 @storybook/addon-links: ^6.4.9 => 6.4.9 @storybook/builder-webpack5: ^6.4.9 => 6.4.9 @storybook/manager-webpack5: ^6.4.9 => 6.4.9 @storybook/node-logger: ^6.4.9 => 6.4.9 @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 @storybook/react: ^6.4.9 => 6.4.9 @storybook/storybook-deployer: ^2.8.10 => 2.8.10

Additional context This occurs after a SB upgrade from .3 > .4 The following configuration is used in our main.js

module.exports = {
  core: {
    builder: 'webpack5'
  },
  framework: '@storybook/react',
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    'storybook-react-intl',
    '@storybook/addon-jest'
  ],
  webpackFinal: config => {
    // Workaround for @storybook/addon-jest on Webpack 5
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        path: require.resolve('path-browserify'),
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify')
      }
    };

    return config;
  }
};

[StuartMorris0]

Removing the core: builder config and the two packages below, resolved the issue.

"@storybook/builder-webpack5": "^6.3.12",
    "@storybook/manager-webpack5": "^6.3.12",

[K3TH3R]

@StuartMorris0 I'm still seeing this error with both core: builder and dependencies installed as well as with them all removed.

[StuartMorris0]

You could try the ol' rm -rf node_modules && yarn, I run that a few times... Other than that, it just started to work :(

[K3TH3R]

@StuartMorris0

Removing the core: builder config and the two packages below, resolved the issue.

"@storybook/builder-webpack5": "^6.3.12",
    "@storybook/manager-webpack5": "^6.3.12",

Can you re-open this ticket? I've upgraded all of my dependencies to 6.4.10 due to the recent colors.js issue and I can't build my project because I'm still seeing the ERR! TypeError: _ws.WebSocketServer is not a constructor error.

I've tried nuking my node_modules and re-installing, but it didn't fix anything :/

If I remove the core: builder config and the two dependencies, its functionally downgrading the build to webpack4, which won't work as our entire app is on Webpack5 now.

[laddi-netapp]

We have the same problem in our codebase where we're not using webpack5 or these two packages. Multiple removal of node_modules + yarn also doesn't solve our issue.

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[ryanpetrello]

I'm also experiencing this same error.

~ node --version && npm --version
v16.3.0
8.3.0
~ npm ls --dev | ack "(storybook|react)"
├── @storybook/addon-actions@6.4.12
├── @storybook/addon-essentials@6.4.12
├── @storybook/addon-links@6.4.12
├── @storybook/builder-webpack5@6.4.12
├── @storybook/manager-webpack5@6.4.12
├── @storybook/node-logger@6.4.12
├── @storybook/preset-create-react-app@4.0.0
├── @storybook/react@6.4.12
├── @storybook/testing-react@1.2.3
├── @testing-library/react@12.1.2
├── create-react-app@5.0.0

~ cat .storybook/main.js
module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
};

> testing@0.1.0 start:storybook
> start-storybook -p 6006 -s public

info @storybook/react v6.4.12
info
(node:1455858) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
ERR! TypeError: _ws.WebSocketServer is not a constructor
ERR!     at new ServerChannel (./node_modules/@storybook/core-server/dist/cjs/utils/get-server-channel.js:22:28)
ERR!     at getServerChannel (./node_modules/@storybook/core-server/dist/cjs/utils/get-server-channel.js:55:10)
ERR!     at storybookDevServer (./node_modules/@storybook/core-server/dist/cjs/dev-server.js:63:62)
ERR!     at async buildDevStandalone (./node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (./node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)

[ryanpetrello]

I was able to move past this error by forcibly installing the latest version of ws:

~ npm install --save-dev "ws@latest"

[K3TH3R]

I was able to move past this error by forcibly installing the latest version of ws:

~ npm install --save-dev "ws@latest"

By itself, this didn't work for me. After doing a big of digging, I found that someone had setup a ws in the resolutions field of the package.json. By adding ws@latest to my dependencies and removing ws from resolutions I was able to get past this issue as well. I also removed previous versions of ws from my yarn.lock file just to make sure I wasn't getting any older versions being found unnecessarily.

[yaKashif]

rm -rf node_modules && yarn worked for me.

[sergeylukin]

+1 for rm -fr node_modules && yarn

[matthew-dean]

I also just ran into this! Same thing, wiping node_modules and reinstalling worked. I think it was a yarn / lerna hoisting issue for me