Storybook: Static web page failed to load with error: "Uncaught TypeError: Super expression must either be null or a function" if you have terser-webpack-plugin with version 1.3.0

[Pashokus]

Describe the bug
Static web page failed to load with error: "Uncaught TypeError: Super expression must either be null or a function" if you have terser-webpack-plugin with version 1.3.0. Any warnings or error during build time. the start script works without any error.

v5.3.18

To Reproduce
Steps to reproduce the behavior:

1. add terser-webpack-plugin with version 1.3.0 to your devDependencies.
2. run build-storybook -c .storybook -o public
3. run npx http-server public
4. Open provided url and check error in the browser console.

update of terser-webpack-plugin to the version 2.3.5 fixes the issue. But maybe it makes sense to add a check.

[Adam-Michalski]

I have this problem after build-storybook.
I have installed terser-webpack-plugin but I still receive this error.
Is there any workaround to this issue?

using npm I have tried to install/update webpack and it does not work for me
I have found this https://medium.com/@anuhosad/react-errors-super-expression-must-either-be-null-or-a-function-4aac6e5173ad but I am using storybook with angular and have no idea what to do to run this app from builded sources. When I run start-storybook app runs ok

[peterp]

if you're using yarn, then yarn upgrade webpack worked for me

[PhiLhoSoft]

I have this issue without using terser-webpack-plugin (EDIT actually, it seems to be bundled with Webpack).
I just updated all the storybook dependencies.
Like Adam, it is in an Angular project, so Webpack is bundled, and I have the exact same stack trace (different hash, of course).
Current relevant dependencies:

"@angular-devkit/build-angular": "^0.803.2",
"@angular-devkit/build-ng-packagr": "^0.803.2",
"@angular/cdk": "8.1.1",
"@angular/cli": "^8.3.2",
"@angular/common": "^8.2.4",
"@angular/compiler": "^8.2.4",
"@angular/compiler-cli": "^8.2.4",
"@angular/core": "^8.2.4",
"@angular/forms": "^8.2.4",
"@angular/platform-browser": "^8.2.4",
"@angular/platform-browser-dynamic": "^8.2.4",
"@babel/core": "^7.9.6",
"@storybook/addon-actions": "5.3.18",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-knobs": "5.3.18",
"@storybook/addon-docs": "5.3.18",
"@storybook/addon-viewport": "5.3.18",
"@storybook/angular": "5.3.18",
"@types/core-js": "^2.5.3",
"@types/faker": "^4.1.11",
"@types/jasmine": "^3.5.10",
"babel-loader": "^8.1.0",
"core-js": "^3.6.5",
"dom4": "^2.1.5",
"faker": "^4.1.0",
"fetch-ie8": "^1.5.0",
"ng-packagr": "5.5.0",
"node-sass": "^4.14.0",
"raw-loader": "^1.0.0",
"rxjs": "^6.5.5",
"stylelint": "^13.3.3",
"tslint": "^5.20.1",
"zone.js": "^0.10.3"

When I run in dev mode, with the command start-storybook --ci, I get a different stack trace, but it doesn't prevent from running.

Warning: Cannot update during an existing state transition (such as within `render`). 
Render methods should be a pure function of props and state.
    in Unknown (created by Context.Consumer)
    in WithTheme(Component)
    in WithTheme(Component) (created by Preview)
[edit: Reduce stacktrace irrelevant to this issue]

[shilman]

@PhiLhoSoft you're seeing https://github.com/storybookjs/storybook/issues/10204

[Adam-Michalski]

Any updates on this issue https://github.com/storybookjs/storybook/issues/10505#issuecomment-621182073 workaruounds, something to build and start storybook?

[PhiLhoSoft]

Thanks @shilman, I found a workaround in the pointed out issue, and indeed it is unrelated to this one, which I still have.

[PhiLhoSoft]

FYI, I found this interesting article: https://medium.com/@omril321/fixing-overly-aggressive-optimization-with-terser-f07309761b50

I tried it like that, in main.js :

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    webpackFinal: async (config, { configType }) => {
        config.optimization = {
            minimize: true, // Also tried false… [EDIT] I finally used configType === 'PRODUCTION' here; it is slow!
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        keep_fnames: /./,
                    },
                }),
            ],
        };
        return config;
    },
    stories: ['./demo/stories/*.stories.ts'],
    addons: [
        '@storybook/addon-actions', // Also used for @storybook/addon-console
        '@storybook/addon-docs',
        '@storybook/addon-knobs',
        '@storybook/addon-viewport',
    ],
};

and alas, I still have the issue, but if it can help…

[PhiLhoSoft]

Update: I finally got rid of this error by upgrading to 6.0.0-beta.4.

I had to add "sass-loader": "^7.3.1" to the package.json, because Storybook 6 brings the v. 8 which has a breaking change in the config, conflicting with some library we use.

[stale[bot]]

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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!