Webpack 5 - error: Universal Chunk Loading is not implemented yet

[daviddelusenet]

Describe the bug
When I run start-storybook -p 9001 -c storybook I get the following output:

info @storybook/react v6.2.1
info
info => Loading presets
info => Loading 1 config file in "/Users/daviddelusenet/Development/react-components/storybook"
info => Loading 8 other files in "/Users/daviddelusenet/Development/react-components/storybook"
info => Adding stories defined in "/Users/daviddelusenet/Development/react-components/storybook/main.js"
info => Using implicit CSS loaders
info => Using default Webpack5 setup
ERR! Error: Universal Chunk Loading is not implemented yet
ERR!     at EnableChunkLoadingPlugin.apply (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/javascript/EnableChunkLoadingPlugin.js:104:12)
ERR!     at WebpackOptionsApply.process (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/WebpackOptionsApply.js:156:40)
ERR!     at createCompiler (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/webpack.js:78:28)
ERR!     at create (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/webpack.js:118:16)
ERR!     at webpack (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/webpack.js:142:32)
ERR!     at Object.f [as get] (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/index.js:41:15)
ERR!     at Object.start (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:72:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR!     at async buildDevStandalone (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async buildDev (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  Error: Universal Chunk Loading is not implemented yet
ERR!     at EnableChunkLoadingPlugin.apply (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/javascript/EnableChunkLoadingPlugin.js:104:12)
ERR!     at WebpackOptionsApply.process (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/WebpackOptionsApply.js:156:40)
ERR!     at createCompiler (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/webpack.js:78:28)
ERR!     at create (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/webpack.js:118:16)
ERR!     at webpack (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/webpack.js:142:32)
ERR!     at Object.f [as get] (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/index.js:41:15)
ERR!     at Object.start (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:72:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR!     at async buildDevStandalone (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async buildDev (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)

My main.js file:

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../src/**/*.stories.@(jsx|tsx|mdx)'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-docs',
    '@storybook/addon-viewport',
    '@storybook/addon-a11y',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
  ],
}

Some dependency information:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1",
"typescript": "^4.2.3",
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0"

Environment Info:

  System:
    OS: macOS 11.2.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/Development/react-components/node_modules/.bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 85.0.2
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-a11y: ^6.2.1 => 6.2.1
    @storybook/addon-actions: ^6.2.1 => 6.2.1
    @storybook/addon-docs: ^6.2.1 => 6.2.1
    @storybook/addon-knobs: ^6.2.1 => 6.2.1
    @storybook/addon-links: ^6.2.1 => 6.2.1
    @storybook/addon-storyshots: ^6.2.1 => 6.2.1
    @storybook/addon-storysource: ^6.2.1 => 6.2.1
    @storybook/addon-viewport: ^6.2.1 => 6.2.1
    @storybook/builder-webpack5: ^6.2.1 => 6.2.1
    @storybook/core: ^6.2.1 => 6.2.1
    @storybook/react: ^6.2.1 => 6.2.1
    @storybook/source-loader: ^6.2.1 => 6.2.1

Please let me know if you need any more information, I'll be happy to provide it!

[j3rem1e]

it's caused by the browserslist or the target option used by webpack.
You can't bundle an app for web and node at the same time today with webpack5.

[daviddelusenet]

You're right, thank you! Had the following .browserslistrc in my project:

last 2 versions
> 1%
maintained node versions
not dead
ie >= 11

Removed the maintained node versions line and now it's working 🙌