[Bug]: hmr runtime was not transformed as expected

[xc2]

Details

Original post: https://discord.com/channels/977448667919286283/1215728156984610876

rsbuild/packages/core/modern.config.ts

Lines 11 to 23 in 8d39134

	{
	buildType: 'bundle',
	format: 'esm',
	target: 'es5',
	dts: false,
	input: {
	hmr: 'src/client/hmr/index.ts',
	},
	outDir: './dist/client',
	autoExtension: true,
	// bundle shared deps when used in client
	autoExternal: false,
	},

the hmr runtime appears to be meant to target es5 but module-tools will strip it as esbuild don't support es5. This results in the hmr runtime kept untransformed.

https://github.com/web-infra-dev/modern.js/blob/2e7585862237e957054ccfa37632c2a34ce6c881/packages/solutions/module-tools/src/builder/esbuild/index.ts?plain=1#L153

we have to update the target to es6 atm as it's the minimium target we can have with esbuild without an additional plugin.

Reproduce link

https://www.npmjs.com/package/@rsbuild/core?activeTab=code

@rsbuild/core/dist/client/hmr.mjs

[chenjiahan]

Thanks! It is still necessary to transform client code to es5, as some apps may still need to be compatible with legacy browsers.

Actually, this is a bug of Modern.js Module, it should enable SWC transform when target is 'es5'. I have submit a PR to fix this: web-infra-dev/modern.js#5527

[wChenonly]

I also encountered this problem today. Through investigation just now, I found that the target in baseBuildConfig in the modern.base.config.ts file is es2020.

[chenjiahan]

I found that the target in baseBuildConfig in the modern.base.config.ts file is es2020.

Yeah, the es2020 is for Node.js target, and client code should be transformed to es5 for compatibility.