0

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 はデコレータを理解していませんか?

4

1 に答える 1