rspack icon indicating copy to clipboard operation
rspack copied to clipboard

[Bug]: Cannot read properties of undefined (reading 'tap ') CommonJsChunkFormatPlugin.js (HtmlWebpackPlugin)

Open Mozzarella123 opened this issue 1 year ago • 1 comments

System Info

System: OS: macOS 14.6.1 CPU: (10) arm64 Apple M2 Pro Memory: 104.19 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm Browsers: Chrome: 129.0.6668.70 Safari: 17.6 npmPackages: @rspack/cli: ^1.0.7 => 1.0.7 @rspack/core: ^1.0.7 => 1.0.7

Details

image
Error: × TypeError: Cannot read properties of undefined (reading 'tap  ')
  │     │     at Object.fn (/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:34:58)
  │     │     at SyncHook.callAsyncStageRange (/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
  │     │     at SyncHook.callStageRange (/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
  │     │     at QueriedHook.call (/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
  │     │     at /node_modules/  @rspack/core/dist/Compiler.js:568:21
  │     │     at last.function (//node_modules/@rspack/core/dist/Compiler.js:848:28)

rspack.config.js

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const rspack = require('@rspack/core');

const mode = process.env.NODE_ENV || 'production';
const isProduction = mode === 'production';

const config = {
  devServer: {
    historyApiFallback: true,
    static: {
      directory: path.join(__dirname, 'src', 'build', 'out'),
    },
    port: 9000,
    host: '0.0.0.0',
    client: {
      overlay: false,
    },
    hot: true,
  },
  mode,
  output: {
    publicPath: '/',
    // filename: '[name].[hash].bundle.js',
    chunkFilename: '[name].[hash].bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },

      {
        test: /\.(ts|tsx)$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|jpg|md|png|html)(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /src/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'resources/',
            publicPath: '/resources/',
          },
        }],
      },
    ].filter(Boolean),
  },
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['es-us', 'ru'],
    }),
    new ForkTsCheckerWebpackPlugin({}),
    new CompressionPlugin(),
  ],
  optimization: {
    usedExports: isProduction,
  },
  devtool: isProduction ? undefined : 'inline-source-map',
};

module.exports = config;

rspack.desktop.config.js

const { merge } = require('webpack-merge');
const path = require('path');
const rspack = require('@rspack/core');

const HtmlWebPackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const commonConfig = require('./rspack.config');
const environment = require('./env');

module.exports = merge(commonConfig, {

  devServer: {
    port: 9090,
  },

  output: {
    path: path.resolve(__dirname, './build/desktop/out/'),
    filename: pathData => (pathData.chunk.name === 'sw' ? '[name].js' : '[name].[hash].js'),
    globalObject: 'this',
  },
  entry: {
    index: path.resolve('./src/desktop/index.tsx'),
    sw: path.resolve('./src/desktop/sw/index.ts'),
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: 'УЮТ Система',
      template: 'src/desktop/index.html',
      favicon: 'resources/favicon.ico',
      excludeChunks: ['sw'],
    }),
    ...environment.locations
      .filter(env => env.type === 'desktop')
      .map(env => (
        new WebpackPwaManifest({
          name: `${env.label} - Уют в вашем доме`,
          description: '',
          short_name: `${env.label} - УЮТ Система`,
          start_url: '.',
          display: 'standalone',
          orientation: 'any',
          prefer_related_applications: false,
          icons: [
            {
              src: path.resolve(__dirname, './resources/android-icon-36x36.png'),
              size: 36,
            },
            {
              src: path.resolve(__dirname, './resources/android-icon-48x48.png'),
              size: 48,
            },
            {
              src: path.resolve(__dirname, './resources/android-icon-72x72.png'),
              size: 72,
            },
            {
              src: path.resolve(__dirname, './resources/android-icon-96x96.png'),
              size: 96,
            },
            {
              src: path.resolve(__dirname, './resources/android-icon-144x144.png'),
              size: 144,
            },
            {
              src: path.resolve(__dirname, './resources/android-icon-192x192.png'),
              size: 192,
            },
          ],
        })
      )),
    new rspack.EnvironmentPlugin({
      'process.env.DEVICE_ENV': 'desktop',
      'process.env.APPLICATION_ENV': JSON.stringify(JSON.stringify(environment)),
    }),
  ],
});

Reproduce link

No response

Reproduce Steps

npm run rspack serve rspack.desktop.config.js

Mozzarella123 avatar Sep 29 '24 05:09 Mozzarella123

It seems that an incompatible plugin internally introduced webpack's CommonJsChunkFormatPlugin. The rspack's CommonJsChunkFormatPlugin should be used instead. Can you provide a repro?

LingyuCoder avatar Sep 30 '24 07:09 LingyuCoder

Hello @Mozzarella123, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

github-actions[bot] avatar Oct 17 '24 12:10 github-actions[bot]

Since the issue was labeled with need reproduction, but no response in 14 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions.

github-actions[bot] avatar Nov 01 '24 00:11 github-actions[bot]