rsbuild: [Bug]: can't get the app to build

版本信息

System:
    OS: macOS 14.1.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 566.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Brave Browser: 120.1.61.101
    Chrome: 119.0.6045.199
    Safari: 17.1.2
  npmPackages:
    @rsbuild/core: ^0.2.4 => 0.2.4 
    @rsbuild/plugin-node-polyfill: ^0.2.4 => 0.2.4 
    @rsbuild/plugin-react: ^0.2.4 => 0.2.4 
    @rsbuild/plugin-svgr: ^0.2.4 => 0.2.4 
    @rsbuild/plugin-type-check: ^0.2.4 => 0.2.4

问题详情

RSbuild config

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
import ChunkPatchPlugin from './scripts/ChunkPatchPlugin';
import modulefederationConfig from './modulefederation.config';
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';

export default defineConfig({
  dev: {
    assetPrefix: 'http://localhost:3001/'
  },
  output: {
    cleanDistPath: true,
    distPath: {
      root: './build'
    },
    filename: {
      js: '[name].js',
      css: '[name].css',
      media: '[name].[ext]',
      font: '[name].[ext]',
      image: '[name].[ext]'
    }
  },
  server: {
    port: 3001
  },
  html: {
    inject: true,
    template: './public/index.html',
    templateParameters: {
      PUBLIC_URL: ''
    }
  },

  tools: {
    webpack: (config, { webpack, appendPlugins }) => {
      appendPlugins([
        new webpack.container.ModuleFederationPlugin(modulefederationConfig),
        new ChunkPatchPlugin('provider')
      ]);

      if (config.optimization) {
        config.optimization.splitChunks = {
          ...config.optimization.splitChunks,
          cacheGroups: {
            common: {
              name: `chunk-common`,
              minChunks: 3,
              enforce: true,
              priority: -20,
              chunks: 'async',
              reuseExistingChunk: true,
              test(module: { type?: string }) {
                if (
                  module.type === 'provide-module' ||
                  module.type === 'consume-shared-module' ||
                  module.type === 'remote-module'
                ) {
                  return false;
                }
                return true;
              }
            }
          }
        };
      }

      if (config.output) {
        config.output.publicPath = 'auto';
      }

      return config;
    },
    rspack: (config, { env }) => {
      if (env === 'development') {
        config.devtool = 'eval-cheap-module-source-map';
      }

      return config;
    }
  },
  plugins: [pluginReact(), pluginSvgr(), pluginNodePolyfill()]
});

复现链接

didn’t understand the instructions in Chinese

复现步骤

Console Error

reynaldo@Reynaldos-MacBook-Pro connect-webapp % npm run build

> nextgen@0.1.0 build
> DEBUG=rsbuild rsbuild build

  Rsbuild v0.2.4

debug   add default plugins [184.47 ms]
debug   add default plugins done [193.06 ms]
debug   init plugins [193.78 ms]
debug   init plugins done [195.40 ms]
debug   modify Rsbuild config [195.45 ms]
debug   modify Rsbuild config done [195.75 ms]
debug   modify bundler chain [242.11 ms]
debug   modify bundler chain done [307.10 ms]
debug   modify Rspack config [309.19 ms]
debug   modify Rspack config done [309.90 ms]
debug   create compiler [310.02 ms]
debug   create compiler done [328.94 ms]
start   Use Rspack v0.4.3
● Client ━━━━━━━━━━━━━━━━━━━━━━━━━ (1%) make                                                                                                                                       success Inspect config succeed, open following files to view the content: 

  - Rsbuild Config: /webapp/dist/rsbuild.config.js
  - Rspack Config (web): /webapp/dist/rspack.config.web.js

● Client ━━━━━━━━━━━━━━━━━━━━━━━━━ (10%) building ./setRef                                                                                                                         Can't resolve require crypto in /webapp/node_modules/crypto-js/core.js
● Client ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) done                                                                                                                                     error   Compile error: 
Failed to compile, check the errors for troubleshooting.
× Conflict: Multiple assets emit different content to the same filename index.html

error   Failed to build.
error   Rspack build failed!
    at /webapp/node_modules/@rsbuild/core/dist/provider/core/build.js:32:35
    at finalCallback (/webapp/node_modules/@rspack/core/dist/Compiler.js:335:21)
    at /webapp/node_modules/@rspack/core/dist/Compiler.js:359:40
    at Hook.eval [as callAsync] (eval at create (/webapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/webapp/node_modules/tapable/lib/Hook.js:18:14)
    at /webapp/node_modules/@rspack/core/dist/Compiler.js:354:41
    at /webapp/node_modules/@rspack/core/dist/Compiler.js:391:21

About this issue

  • Original URL
  • State: closed
  • Created 7 months ago
  • Comments: 17 (8 by maintainers)

Most upvoted comments

template: ‘./public/index.html’,

Hi @ErreMalote, the reason is that all the files in the public folder are copied to dist during the build process.

To resolve this, you can either move the template file out of the public folder or rename it to something other than index.html, for example, index.ejs

anyway, I believe rsbuild should work in the same way as other builders for this scenario.

Minimal reproduce: https://github.com/xc2/rspack-usecases/tree/aa6ef0283b9407c8ca013c7c18345b0b7353482e/rsbuild/public-dir-and-html-plugin