Cannot read property 'tap' of undefined in ts-loader

[hg-pyun]

Describe the bug

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

To Reproduce

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',
    }),
  ],
};

.storybook/main.js

Error

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

Expected behavior
Do works without TypeError.

System

• Node.js v14.15.5
• darwin 19.6.0
• Npm Version 6.14.11
• webpack

├─┬ @storybook/react@6.1.21
│ ├─┬ @storybook/core@6.1.21
│ │ └── UNMET PEER DEPENDENCY webpack@4.46.0 
│ └── webpack@4.46.0 
└── webpack@5.24.3 

• html-webpack-plugin

├─┬ @storybook/react@6.1.21
│ └─┬ @storybook/core@6.1.21
│   └── html-webpack-plugin@4.5.2 
└── html-webpack-plugin@5.2.0 

package.json

"webpack": "^5.24.3",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
"html-webpack-plugin": "^5.2.0",

[marjisound]

I'm having the same issue. After upgrading webpack to v5 when I build-storybook or start-storybook, ts-loader module build fails and I get Cannot read property 'tap' of undefined

WARN ./src/components/anchor.stories.tsx WARN Module build failed (from ./node_modules/ts-loader/index.js): WARN TypeError: Cannot read property 'tap' of undefined WARN at makeAssetsCallback (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/instances.js:218:50) WARN at addAssetHooks (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/instances.js:224:9) WARN at Object.initializeInstance (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/instances.js:288:9) WARN at successLoader (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/index.js:26:17) WARN at Object.loader (/Users/marjank/code/apps-rendering/node_modules/ts-loader/dist/index.js:23:5) WARN @ \.)(?=.)[^/]*?\.stories\.(js|mdx|ts|tsx))$ (./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|mdx|ts|tsx))$) ./components/anchor.stories.tsx WARN @ ./.storybook/generated-stories-entry.js WARN @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js

I did change my storybook webpack.config.ts to use config.module.rules.push based on what @hg-pyun was suggesting but it didn't work for me.

Do you have any thought of what could cause this?

[hg-pyun]

@marjisound The error seems to have included ts-loader in webpack.config.js. In my case, the storybook used config.moodle.rules.push to remove the ts-loader. Storybooks seem to use webpack4 internally. Lower the webpack 5 version or remove the ts-loader from the storybook defendancy.

[shilman]

closing as dupe to #14170 which has a repro