TypeError: Cannot read property 'tap' of undefined

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.

#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,
        },
      },
    };
  },
};