React プロジェクトのビルド パイプラインに Webpack5 と ESbuild-loader を使用しています。コンポーネントを Redux ストアに接続するために@connect
、HOC アプローチを使用する代わりにデコレーターを使用します。
例:MyComponent.jsx
@connect((state) => ({
notes: state.notes,
}))
class MyComponent extends PureComponent {
static propTypes = {
notes: PropTypes.arrayOf(PropTypes.object),
};
...
}
js/jsx
ファイルの Webpack 構成ルールは次のとおりです。
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'esbuild-loader',
options: {
loader: 'jsx',
target: 'es2015',
},
},
開発サーバーを起動しようとすると、行デコレーターが定義されていることに関連する次のエラーが表示されます。
ERROR in ./project/MyComponent.jsx
Module build failed (from ./node_modules/esbuild-loader/dist/index.js):
Error: Transform failed with 1 error:
MyComponent.js:63:0: ERROR: Unexpected "@"
ESbuild はデコレータを理解していませんか?