Broken build Storybook 6.3.7 + Webpack 5

[vertic4l]

Broken build with latest Storybook (6.3.7) + Webpack 5

main.js

const path = require("path");
const custom = require("../webpack.config.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    core: {
        builder: "webpack5",
    },
    stories: ["../src/**/*.story.tsx"],
    addons: [
        "@storybook/addon-toolbars",
        "@storybook/addon-actions",
        "@storybook/addon-links",
        "@storybook/addon-viewport",
        "@storybook/addon-docs",
        "@storybook/addon-controls",
        {
            name: "@storybook/preset-typescript",
            options: {
                tsLoaderOptions: {
                    configFile: path.resolve(__dirname, "../tsconfig.json"),
                },
                tsDocgenLoaderOptions: {
                    tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
                },
            },
        },
    ],
    webpackFinal: async (config) => {
        return {
            ...config,
            module: {
                ...config.module,
                rules: custom.module.rules,
            },
            resolve: {
                ...custom.resolve,
                ...config.resolve,
                modules: [...config.resolve.modules, ...custom.resolve.modules],
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename: "[name].[contenthash].css",
                }),
                ...config.plugins,
            ],
            // added for Storybook 6.3.7 due to warnings or similar
            output: {
                chunkFormat: "array-push",
            },
            resolve: {
                fallback: { stream: false },
            },
        };
    },
};

main.js worked with Storybook 6.2.8 + Webpack 4

System

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.17.5 - /usr/local/opt/node@14/bin/node
    npm: 6.14.14 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 84.0.2
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-actions: ^6.3.7 => 6.3.7 
    @storybook/addon-controls: ^6.3.7 => 6.3.7 
    @storybook/addon-docs: ^6.3.7 => 6.3.7 
    @storybook/addon-links: ^6.3.7 => 6.3.7 
    @storybook/addon-storyshots: ^6.3.7 => 6.3.7 
    @storybook/addon-toolbars: ^6.3.7 => 6.3.7 
    @storybook/addon-viewport: ^6.3.7 => 6.3.7 
    @storybook/addons: ^6.3.7 => 6.3.7 
    @storybook/builder-webpack5: ^6.3.7 => 6.3.7 
    @storybook/cli: ^6.3.7 => 6.3.7 
    @storybook/manager-webpack5: ^6.3.7 => 6.3.7 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^6.3.7 => 6.3.7 

Additional context
starting with start-storybook -p 6006 -s ./public
-s gets ignored with 6.3.7 and creates own dist folder

There are 2 issues which come up after trying to start it, sometimes it's:

ERR! Error: For the selected environment is no default script chunk format available:
ERR! JSONP Array push can be chosen when 'document' or 'importScripts' is available.
ERR! CommonJs exports can be chosen when 'require' or node builtins are available.

ModuleNotFoundError: Module not found: Error: Can't resolve '...'
Parsed request is a module using description file: src/package.json

webpack5 build + dev build works as expected, but storybook fails unfortunately.

[nstepien]

This seems related to the target option: https://webpack.js.org/configuration/target/

It defaults to browserslist, my browserslist config looks like this:

last 2 chrome versions
last 2 edge versions
last 2 firefox versions
last 2 safari versions
maintained node versions

If I remove maintained node versions then the error goes away.

[nstepien]

Okay I figured out how to fix the build for my setup, my .storybook/main.ts now looks like this:

// extend existing config in my `browserslist` file, and remove `maintained node versions`
// https://github.com/browserslist/browserslist#full-list
const target = 'browserslist:browserslist config, not maintained node versions';

export default {
  // ...
  managerWebpack(config) {
    config.target = target;
    return config;
  },
  webpackFinal(config, { configType }) {
    config.target = target;
    return config;
  }
};

The trickiest part was to find out how to fix the manager build, as managerWebpack is not/under documented.

[Th3S4mur41]

I'm also facing an issue with the following .browserslistrc although a bit different...

# Desktop
last 3 Chrome versions
last 3 Edge versions
last 3 Firefox versions
Firefox ESR
last 2 Opera versions
last 3 Safari versions

# Mobile
last 2 ChromeAndroid versions
last 2 FirefoxAndroid versions
last 3 iOS versions

I'm working with WebPack 4 and Storybook 6.4.0-rc11

I already tried removing the lines one by one without success.
The only way to get to a working page is to remove the .browserslistrc from the project.
As soon as I add the .browserslisrc to my root folder, the page won't render with the following error in the console:

StoryStore.js:182 
        
       Uncaught ReferenceError: regeneratorRuntime is not defined
    at vendors~main.iframe.bundle.js:69566:63
    at vendors~main.iframe.bundle.js:69597:6
    at Object../node_modules/@storybook/store/dist/esm/StoryStore.js (vendors~main.iframe.bundle.js:69859:2)
    at __webpack_require__ (runtime~main.iframe.bundle.js:854:30)
    at fn (runtime~main.iframe.bundle.js:151:20)
    at Object../node_modules/@storybook/web-components/node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/preview/index.js (vendors~main.iframe.bundle.js:72441:74)
    at __webpack_require__ (runtime~main.iframe.bundle.js:854:30)
    at fn (runtime~main.iframe.bundle.js:151:20)
    at Module../node_modules/@storybook/web-components/node_modules/@storybook/core/node_modules/@storybook/core-client/dist/esm/index.js (vendors~main.iframe.bundle.js:72234:66)
    at __webpack_require__ (runtime~main.iframe.bundle.js:854:30)

In my case though, the issue happens with Webpack 4 => #16824

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[tflx]

I'm getting the same "regeneratorRuntime is not defined" error with webpack 5 and Storybook 6.4.10
From what I can tell it doesn't really matter what I write in my browserslist. I have to remove it entirely.

[kedarv]

Okay I figured out how to fix the build for my setup, my .storybook/main.ts now looks like this:

// extend existing config in my `browserslist` file, and remove `maintained node versions`
// https://github.com/browserslist/browserslist#full-list
const target = 'browserslist:browserslist config, not maintained node versions';

export default {
  // ...
  managerWebpack(config) {
    config.target = target;
    return config;
  },
  webpackFinal(config, { configType }) {
    config.target = target;
    return config;
  }
};

The trickiest part was to find out how to fix the manager build, as managerWebpack is not/under documented.

Thanks for posting this, I was able to get the build beyond this point by adding the fixes suggested above (Although, I just set the target to web)

[yarrysmod]

storybook: 6.5.7
angular 13.3.7
integrated the storybook start & build in the angular.json file in the architect definition.

Tried a variety of fixes with reference to what @nstepien suggested, still getting issues when building for an Angular project. My .browserslistrc file is empty so it fetches the default list from the browserslist config but it fails this way. Explicitly setting the default config lines let's it transpile for some strange reason:

# .browserslistrc
> 0.5%
last 2 versions
Firefox ESR
not dead

but at the end I receive this new error:

Error: node_modules/@storybook/api/dist/ts3.9/lib/stories.d.ts:1:8 - error TS1259: Module '"<project dir>/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React from 'react';
         ~~~~~

  node_modules/@types/react/index.d.ts:61:1
    61 export = React;
       ~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

I assume this is directly related to the migration into the angular json file, adding "allowSyntheticDefaultImports": true in the project's tsconfig.json file fixed that issue.

EDIT: currently does not work with Node 16.15.0 + NPM 8.5.5, related: #18298 (comment)