ESBuild-loader does not understand javascript decorators (e.g. redux's @connect )

1
closed
mohsentaleb
mohsentaleb
Posted 3 months ago

ESBuild-loader does not understand javascript decorators (e.g. redux's @connect ) #238

Bug description

I'm using Webpack5 with ESbuild-loader for my React project's build pipeline. For connecting my components to Redux store I use @connect decorator instead of using the HOC approach.

When I try to start my dev server I get this error which is related to the line decorator is defined:

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 "@"

Reproduction

Example: MyComponent.jsx

@connect((state) => ({
    notes: state.notes,
}))
class MyComponent extends PureComponent {
    static propTypes = {
        notes: PropTypes.arrayOf(PropTypes.object),
    };
...
}

And here's my Webpack config rule for js/jsx files:


module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            loader: 'esbuild-loader',
            options: {
                loader: 'jsx',
                target: 'es2015',
            },
        },

Node.js package manager

npm

Environment

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 4.71 GB / 15.92 GB
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.16.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    esbuild-loader: ^2.18.0 => 2.18.0
    webpack: ^5.66.0 => 5.66.0



### Can you contribute a fix?

- [ ] I’m interested in opening a pull request for this issue.
privatenumber
privatenumber
Created 3 months ago

This is expected behavior—neither esbuild or esbuild-loader is advertised to support decorators.

You can follow this thread for future support https://github.com/evanw/esbuild/issues/104