[Bug]: ReferenceError: $ReactRefreshRuntime$ is not defined

[jayjliang]

Version

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 174.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.2.1
    Safari Technology Preview: 17.4
  npmPackages:
    @rsbuild/core: ^0.4.14 => 0.4.15 
    @rsbuild/plugin-node-polyfill: ^0.4.14 => 0.4.15 
    @rsbuild/plugin-react: ^0.4.14 => 0.4.15 
    @rsbuild/plugin-styled-components: ^0.4.15 => 0.4.15

Details

Our project use handlebars template engine , t throw errors: ReferenceError: $ReactRefreshRuntime$ is not defined when build with handlebars-loader, i

Reproduce link

https://github.com/jayjliang/rsbuild-demo

Reproduce Steps

yarn
npm run dev

[xc2]

please try out

export default defineConfig({
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).tap(([options]) => {
        return [{
          ...options,
          exclude: [/node_modules/, /rsbuild-plugin-handlebars/],
        }];
      });
    },
  }
});

[jayjliang]

it works! but why? does rsbuild has builtin handlebars plugin?

[xc2]

it works! but why? does rsbuild has builtin handlebars plugin?

nope, /rsbuild-plugin-handlebars/ matches this file in your repo: https://github.com/jayjliang/rsbuild-demo/blob/b3964306eca7b4bf05f4bb66bf94526deefb2214/plugins/rsbuild-plugin-handlebars/handlebars.js

react-refresh plugin inserted runtime code into it but the runtime was not provided as expected. still not sure whats the cause of it. might be things to do with html-webpack-plugin or childCompiler

the config above is just a workaround.