Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Mozzarella123 opened this issue Sep 29, 2024 · 1 comment
Labels
bug Something isn't working pending triage The issue/PR is currently untouched.

Comments

@Mozzarella123
Copy link

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 Mozzarella123 added bug Something isn't working pending triage The issue/PR is currently untouched. labels Sep 29, 2024
@LingyuCoder
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working pending triage The issue/PR is currently untouched.
Projects
None yet
Development

No branches or pull requests

2 participants