Html-webpack-plugin: TypeError: Cannot read property 'tap' of undefined

[Madejczyk]

Current behaviour 💣

info @storybook/react v6.1.21
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook\main.js"
info => Using default Webpack setup
ERR! TypeError: Cannot read property 'tap' of undefined
ERR!     at HtmlWebpackPlugin.apply (.\node_modules\html-webpack-plugin\index.js:41:31)
ERR!     at webpack (.\node_modules\@storybook\core\node_modules\webpack\lib\webpack.js:51:13)
ERR!     at startPreview (.\node_modules\@storybook\core\dist\server\dev-server.js:420:39)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (.\node_modules\@storybook\core\dist\server\dev-server.js:505:29)
ERR!     at async buildDevStandalone (.\node_modules\@storybook\core\dist\server\build-dev.js:317:33)
ERR!     at async buildDev (.\node_modules\@storybook\core\dist\server\build-dev.js:380:3)
ERR!  TypeError: Cannot read property 'tap' of undefined
ERR!     at HtmlWebpackPlugin.apply (.\node_modules\html-webpack-plugin\index.js:41:31)
ERR!     at webpack (.\node_modules\@storybook\core\node_modules\webpack\lib\webpack.js:51:13)
ERR!     at startPreview (.\node_modules\@storybook\core\dist\server\dev-server.js:420:39)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (.\node_modules\@storybook\core\dist\server\dev-server.js:505:29)
ERR!     at async buildDevStandalone (.\node_modules\@storybook\core\dist\server\build-dev.js:317:33)
ERR!     at async buildDev .\node_modules\@storybook\core\dist\server\build-dev.js:380:3)

Expected behaviour ☀️

Html-webpack-plugin will be compatible with storybook

Reproduction Example 👾

Packages:

- "@storybook/react": "^6.1.21",
-  "babel-loader": "^8.1.0",
-  "html-webpack-plugin": "^5.2.0",
-  "mini-css-extract-plugin": "^1.3.9",
-  "webpack": "^5.24.3",
-  "webpack-cli": "^4.2.0",
-  "webpack-dev-server": "^3.11.0"

Content of .storybook/main.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    stories: ['../src/Examples.stories.tsx'],
    webpackFinal: (config) => {
        return { ...config,
        plugins: [
          new MiniCssExtractPlugin(),
          new HtmlWebpackPlugin(),
        ],
        module: { 
            rules: [
                {
                  test: /\.(ts|js)x?$/,
                  exclude: /node_modules/,
                  use: {
                    loader: 'babel-loader',
                    options: require('../../babel.config.js')
                  }
                },
                {
                  test: /\.css$/i,
                  use: [MiniCssExtractPlugin.loader, 'css-loader'],
                },
                {
                  test: /\.(png|svg|gif)$/,
                  loader: 'file-loader',
                  options: {
                    outputPath: 'images',
                    name: '[name].[ext]'
                  }
                },
                {
                  test: /\.(woff|woff2|eot|ttf|otf)$/,
                  loader: 'file-loader',
                  options: {
                    outputPath: 'fonts',
                    name: '[name].[ext]'
                  }
                },
              ]
         } };
    },
}

[Madejczyk]

When I removed HtmlWebpackPlugin I have issue:

info @storybook/react v6.1.21
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook\main.js"
info => Using default Webpack setup
ERR! TypeError: The 'compilation' argument must be an instance of Compilation
ERR!     at Function.getCompilationHooks (.\node_modules\webpack\lib\NormalModule.js:179:10)
ERR!     at .\node_modules\mini-css-extract-plugin\dist\index.js:363:103
ERR!     at SyncHook.eval [as call] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:1)
ERR!     at SyncHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
ERR!     at Compiler.newCompilation (.\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:631:26)
ERR!     at .\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook .\node_modules\tapable\lib\Hook.js:154:20)
ERR!     at Compiler.compile (.\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:662:28)
ERR!     at .\node_modules\@storybook\core\node_modules\webpack\lib\Watching.js:77:18
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
ERR!     at Watching._go (.\node_modules\@storybook\core\node_modules\webpack\lib\Watching.js:41:32)
ERR!     at .\node_modules\@storybook\core\node_modules\webpack\lib\Watching.js:33:9
ERR!     at Compiler.readRecords .\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:529:11)
ERR!     at new Watching (.\node_modules\@storybook\core\node_modules\webpack\lib\Watching.js:30:17)
ERR!  TypeError: The 'compilation' argument must be an instance of Compilation

[Madejczyk]

I found issue: https://github.com/storybookjs/storybook/issues/9216, so I think that issue maybe is with storybook, but please confirm my predictions/guesswork.

And when I use style-loader all works fine, so we can close this issue.

[hg-pyun]

1618

In my case, ts-loader occurs the issue.

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: Cannot read property 'tap' of undefined

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const srcPath = path.resolve(__dirname, './src');
const distPath = path.resolve(__dirname, './dist');

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: ['react-hot-loader/patch', path.resolve(srcPath, './index.tsx')],
  output: {
    path: distPath,
    publicPath: '/',
    filename: 'bundle.[hash].js',
  },
  resolve: {
    extensions: ['.js', '.ts', '.json', '.tsx', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'react-dom': '@hot-loader/react-dom',
    },
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]',
              },
            },
          },
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: '@import "src/assets/scss/lib.scss";',
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(woff|woff2|png|jpe?g|gif|svg)/,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};

Not work

const webpackConfig = require('../webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.mdx', '../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: webpackConfig.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...webpackConfig.resolve,
        alias: {
          ...config.resolve.alias,
          ...webpackConfig.resolve.alias,
        },
      },
    };
  },
};

Work

const webpackConfig = require('../webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.mdx', '../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.s?css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[local]',
            },
          },
        },
        'resolve-url-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: '@import "src/assets/scss/lib.scss";',
          },
        },
      ],
    })

    return {
      ...config,
      resolve: {
        ...config.resolve,
        ...webpackConfig.resolve,
        alias: {
          ...config.resolve.alias,
          ...webpackConfig.resolve.alias,
        },
      },
    };
  },
};

[jantimon]

Sorry I have no idea how I can help you here

[AviVahl]

TypeError: Cannot read property 'tap' of undefined probably happens due to mixing of incompatible html-webpack-plugin and webpack versions.

TypeError: The 'compilation' argument must be an instance of Compilation probably happens due to having duplicate webpack copies in node_modules (either of the same or different versions) mixing together in a single compilation.

Check your npm/yarn/pnpm install log. Do you see any peerDependency warnings? These are the first that require fixing. Then make sure you don't have duplicate webpack versions. You can do that by examining the lock files or node_modules itself. npm list or yarn list might come in handy.

[DaPfeifa]

@AviVahl thank you very much, that solves my issue.

In my case the html-webpack-plugin was installed in the root node_modules folder, because it was used in multiple packages. And so it refers to an older webpack@4 packge, which was used in other packages.

I resolved it by updating all packages to webpack@5.
Look also for plugins, which depends on webpack@4: yarn why webpack

[wansiklee]

I'm current using webpack 4.44.2 version, so I downed html-webpack-plugin version 5.3.1 to 4.5.2, It works well!

[zcg4153510]

I also encountered this problem. I used version 5.3.1 and webpack 5.35.0, and did not use any other packages.

[zcg4153510]

It's really a version issue, but why not fix it