search

storybookjs / addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
https://storybookjs.github.io/addon-designs
MIT License
870 stars 73 forks source link

Webpack v4 build error [Error: html-webpack-plugin could not minify the generated output] #162

Closed upieez closed 2 years ago

upieez commented 2 years ago

Affected design types

Describe the bug

So I'm using Next.js v12.0.8 and React v17.0.2 and when I add storybook-addon-designs to my config file in main.js it throws me a webpack error. I did not use the features from the addon but only added it to my configuration in main.js

My storybook is currently using Webpack v4 and if I removed storybook-addon-designs from my main.js, it builds successfully

Below is my storybook main.js configuration when the build error

I suspect it could be related to webpackFinal? I added it to my configuration because I am using absolute paths when I am importing my file. 

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    'storybook-addon-designs',
  ],
  webpackFinal: async config => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    return config;
  },
};

Here's the error log when I try to build storybook

ERR! => Failed to build the manager
ERR!   Error: html-webpack-plugin could not minify the generated output.
ERR!   In production mode the html minifcation is enabled by default.
ERR!   If you are not generating a valid html output please disable it manually.
ERR!   You can do so by adding the following setting to your HtmlWebpackPlugin config:
ERR!   |
ERR!   |    minify: false
ERR!   |
ERR!   See https://github.com/jantimon/html-webpack-plugin#options for details.
ERR!   For parser dedicated bugs please create an issue here:
ERR!   https://danielruf.github.io/html-minifier-terser/
ERR!   Parse Error: <meta name="viewport" content="width=device-width, initial-scale=1"   ">
ERR!       <style>
ERR!         #root[hidden],
ERR!         #docs-root[hidden] {
ERR!           display: none !important;
ERR!         }
ERR!       </style>
ERR!     </head>
ERR!     <body>
ERR!       <div id="root"></div>
ERR!       <div id="docs-root"></div>
ERR!       <script>
ERR!               window['CONFIG_TYPE'] = "PRODUCTION";
ERR!               window['LOGLEVEL'] = "info";
ERR!               window['FEATURES'] = {"postcss":true,"emotionAlias":false,"warnOnLega  cyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":false,"modernI  nlineRender":false,"breakingChangesV7":false,"interactionsDebugger":false,"babelM  odeV7":false,"argTypeTargetsV7":false,"previewMdx2":false};
ERR!               window['DOCS_MODE'] = false;
ERR!       </script>
ERR!       <script src="runtime~main.6e8da846ce8345d27bb8.manager.bundle.js"></script>
ERR!       <script src="vendors~main.ba2ba9f2684280d3c1b1.manager.bundle.js"></script>
ERR!       <script src="main.e929af2d7b881aec792c.manager.bundle.js"></script>
ERR!     </body>
ERR!   </html>
ERR!
ERR!   - htmlparser.js:244 new HTMLParser
ERR!     [seedly-web]/[html-minifier-terser]/src/htmlparser.js:244:13
ERR!
ERR!   - htmlminifier.js:993 minify
ERR!     [seedly-web]/[html-minifier-terser]/src/htmlminifier.js:993:3
ERR!
ERR!   - htmlminifier.js:1354 Object.exports.minify
ERR!     [seedly-web]/[html-minifier-terser]/src/htmlminifier.js:1354:16
ERR!
ERR!   - index.js:1019 HtmlWebpackPlugin.minifyHtml
ERR!     [seedly-web]/[html-webpack-plugin]/index.js:1019:46
ERR!
ERR!   - index.js:435 HtmlWebpackPlugin.postProcessHtml
ERR!     [seedly-web]/[html-webpack-plugin]/index.js:435:40
ERR!
ERR!   - index.js:260
ERR!     [seedly-web]/[html-webpack-plugin]/index.js:260:25
ERR!
ERR!   - runMicrotasks
ERR!
ERR!   - task_queues.js:97 processTicksAndRejections
ERR!     internal/process/task_queues.js:97:5
ERR!
ERR!

How to reproduce the bug?

  1. Install the addon
  2. Add the addon to your configuration file along with @storybook/addon-essentials and @storybook/addon-links
  3. Run build-storybook
  4. Error, build failed

Expected behaviour

Build successfully without any error

Environment

Affected versions

6.3.1

Storybook versions

6.5.10

pocka commented 2 years ago

@upieez

I suspect it could be related to webpackFinal? I added it to my configuration because I am using absolute paths when I am importing my file.

If you comment-out customization lines and html-webpack-plugin start working fine, it would be webpackFinal (be aware of Storybook caches). If not, it's a version mismatching around the html-webpack-plugin: confused package manager pulling in/resolving to weird versions or some package's dependencies conflicting with yours. From my experience, the latter is more likely to happen.

Things like yarn info html-webpack-plugin -A or npm ls html-webpack-plugin (or related packages) help debug this kind of problem.

I'll close for now as this addon does not have webpack-related dependencies or modify webpack config^0. If there is something this addon could/should do, please provide a more detailed reproduction step or repository and re-open.