rspack icon indicating copy to clipboard operation
rspack copied to clipboard

[Bug]: Chunks hashes calculated with errors

Open RabbitShare opened this issue 1 year ago • 4 comments

System Info

System: OS: macOS 15.0 CPU: (10) arm64 Apple M1 Pro Memory: 139.61 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm Browsers: Chrome: 128.0.6613.138 Firefox: 128.0.2 Safari: 18.0

Details

After build some files dosen't change his hashes, but links to builded files changed. image Sorry for bad quality. It's our user's screenshot

Rspack trying to request chunk /js/5488.undefined.js. But this chunk broken. I think it's because rspack not change file hash if change only link to another chunk (i don't know how it works, perceive link as abstraction) image (comparison of two chunks with same names between different builds) image

webpack build normally.

rspack.config.ts

import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import RefreshPlugin from '@rspack/plugin-react-refresh';
import path from 'path';
import dotenv from 'dotenv';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
import HtmlRspackPlugin from 'html-rspack-plugin';

dotenv.config({ path: './.env.local' });
const isDev = process.env.NODE_ENV === 'development';

const APP_NAME = 'Secret';
const COOKIE_BACKEND_HOST = process.env.COOKIE_BACKEND_HOST;
const DEBUG_HOST = 'localhost';
const DEBUG_PORT = process.env.PORT || '8086';
const BASE_URL = process.env.BASE_URL || '/api';
const DEV_PROXY = process.env.REACT_APP_API_BASE_URL;
const JSON_ENV_URL = process.env.JSON_ENV_URL || '/config.json';
const FAVICON_PATH = path.resolve(__dirname, 'src', 'assets', 'favicon.ico');
const ALLOW_ANALYTICS = Boolean(process.env.ALLOW_ANALYTICS);

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];

export default defineConfig({
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: `js/[name].[${isDev ? 'fullhash' : 'contenthash'}].bundle.js`,
    chunkFilename: 'js/[name].[chunkhash:8].js',
    clean: true,
  },
  devtool: isDev ? 'source-map' : false,
  experiments: {
    css: true,
  },
  context: __dirname,
  entry: {
    main: './src/app/index.tsx',
  },
  resolve: {
    extensions: ['...', '.ts', '.tsx', '.jsx'],
    tsConfig: {
      configFile: path.resolve(__dirname, 'tsconfig.json'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(jsx?|tsx?)$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                experimental: {
                  plugins: [
                    [
                      '@swc/plugin-styled-components',
                      {
                        displayName: true,
                        ssr: false,
                      },
                    ],
                  ],
                },
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                },
                transform: {
                  react: {
                    runtime: 'automatic',
                    development: isDev,
                    refresh: isDev,
                  },
                },
              },
              env: { targets },
            },
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new rspack.DefinePlugin({
      env: { JSON_ENV_URL: JSON.stringify(JSON_ENV_URL) },
      webpack: {
        isProduction: !isDev,
      },
    }),
    new HtmlRspackPlugin({
      template: './src/index.html',
      inject: 'body',
      templateParameters: {
        title:
          APP_NAME ||
          'You should use variable APP_NAME in rspack.config.ts for your project',
        appConfigFilePath: JSON_ENV_URL,
      },
      favicon: (FAVICON_PATH && path.resolve(__dirname, FAVICON_PATH)) || '',
    }),
    new rspack.CopyRspackPlugin({
      patterns: [{ from: 'public', to: '', noErrorOnMissing: true }],
    }),
    isDev && new RefreshPlugin(),
    ALLOW_ANALYTICS &&
      new RsdoctorRspackPlugin({
        // plugin options
      }),
  ].filter(Boolean),
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets },
      }),
    ],
    runtimeChunk: isDev ? 'single' : 'multiple',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          idHint: 'vendors',
          priority: -1,
          reuseExistingChunk: true,
        },
      },
    },
  },
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      const { SMART_CAPTCHA_SITE_KEY, FEATURE_FLAG_V2_THEME, BASE_URL } =
        process.env;

      devServer?.app?.get(JSON_ENV_URL, (_, response) => {
        response.send(
          JSON.stringify({
            SMART_CAPTCHA_SITE_KEY,
            FEATURE_FLAG_V2_THEME,
            BASE_URL,
          }),
        );
      });

      return middlewares;
    },
    host: DEBUG_HOST,
    port: DEBUG_PORT,
    static: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    proxy: [
      {
        context: [BASE_URL],
        target: DEV_PROXY,
        changeOrigin: true,
        secure: false,
        onProxyReq: (proxyReq) => {
          // CSRF bypass
          proxyReq.setHeader('referer', DEV_PROXY as string);
        },
        cookieDomainRewrite: {
          [COOKIE_BACKEND_HOST as string]: DEBUG_HOST,
        },
      },
    ],
  },
});

Reproduce link

No response

Reproduce Steps

  1. Run build
  2. Modify code in connected chunk
  3. Run build again
  4. ????
  5. One chunk has the same name

RabbitShare avatar Sep 20 '24 08:09 RabbitShare