CODEWITHSUNDEEP
reactjswebpackreact-reduxesbuild
Mohsen Taleb
Mohsen Taleb

Reputation: 1077

Is it possible to have javascript decorators (e.g. redux's @connect ) alongside ESbuild-loader

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.

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',
            },
        },

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

Does ESbuild not understand decorators?

Upvotes: 1

Views: 837

Answers (2)

mPrinC
mPrinC

Reputation: 9411

Esbuild should now support all the 3 types of decorators: Feature request: Decorators support #104: JS Decorators, TS experimental decorators and metadata decorators.

Upvotes: 0

Mohsen Taleb
Mohsen Taleb

Reputation: 1077

According to library maintainer, this is not possible yet.

neither esbuild or esbuild-loader is advertised to support decorators.

Follow the discussion about future support here.

Upvotes: 2

Related Questions