Error when using a decorator @connect([email protected]) for a class

[zhangliu]

System Info

System:
OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (12) x64 AMD EPYC 7Y83 64-Core Processor
Memory: 8.96 GB / 24.96 GB
Container: Yes
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 16.18.0 - /usr/local/nvm/versions/node/v16.18.0/bin/node
Yarn: 1.22.19 - /usr/local/nvm/versions/node/v16.18.0/bin/yarn
npm: 8.19.2 - /usr/local/nvm/versions/node/v16.18.0/bin/npm

Details

When using a decorator @connect([email protected]) for a class while also using the [email protected] package，like：

import { connect } from 'react-redux';
import 'reflect-metadata';

@connect()
class App extends React.Component {
	render() {
		return <div>hello rspack</div>
	}
}

an error is thrown:

Uncaught TypeError
    at DecorateConstructor (defaultVendors~packages_authority_src_unAuth_components_Info_Impl_tsx~packages_authority_src_~cbf9b1-ba9e4772.js:562648:58)
    at Reflect.decorate (defaultVendors~packages_authority_src_unAuth_components_Info_Impl_tsx~packages_authority_src_~cbf9b1-ba9e4772.js:562574:24)
    at Object.__decorate (defaultVendors~packages_authority_src_unAuth_components_Info_Impl_tsx~packages_authority_src_~cbf9b1-ba9e4772.js:626252:92)
 

Reproduce link

No response

Reproduce Steps

1. create a rspack project
2. write code in main.tsx（the entry file）:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import 'reflect-metadata';

const store = createStore(combineReducers({}));

@connect()
class App extends React.Component {
	render() {
		return <div>hello rspack</div>
	}
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

3. run npm run dev comman，then you can see the error：

[zhangliu]

The reason is that reflect-metadata rewrite the window.Reflect, which changed rspack's handling for decorators：

ref：https://github.com/rbuckton/reflect-metadata/blob/master/Reflect.js

and reflect-metadata design for stage 3 of decorator，which require a class decorator to return a function：

ref：https://github.com/tc39/proposal-decorators#class-methods

[IWANABETHATGUY]

Maybe related to swc-project/swc#2703

[IWANABETHATGUY]

Here is a workaround, but may hurt performance,
rspack.config.js

/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
	devtool: false,
	context: __dirname,
	entry: {
		main: "./src/main.tsx",
	},
	output: { chunkFormat: "commonjs" },

	builtins: {
		html: [
			{
				template: "./index.html",
			},
		],
	},
	module: {
		rules: [
			{
				test: /\.svg$/,
				type: "asset",
			},
			{
				test: /\.tsx?$/,
				use: [
					{
						loader: "babel-loader",
					},
				],
			},
		],
	},
};

.babelrc

{
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
  ],
  "presets": [
    "@babel/preset-typescript"
  ]
}

[IWANABETHATGUY]

We need time to investigate or port the related babel plugin.

[IWANABETHATGUY]

Since this issue has workaround now, I downgrade the priority.

[hardfist]

since emitDecoratorMetadata needs typecheck evanw/esbuild#257 (comment) and it's out of scope of rspack, so we wouldn't fix it