Broken build Storybook 6.3.7 + Webpack 5

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.