Functional example of decorators?

[Strnadj]

We are trying to use http://inversify.io/, it uses attribute decorators to inject:

     constructor(@inject(TYPES.Repository) repository) {

     }

but if I try to use mobX configuration (add decorator support), I am still getting:

Module parse failed: Unexpected character '@' (41:21)
You may need an appropriate loader to handle this file type.
| /*#__PURE__*/
| function () {
>   function TestUsage(@inject(TYPES.Test)
|   test) {
|     _classCallCheck(this, TestUsage);

I think this issue is caused by the configuration of webpack in CRA, they are not using ts-loader, but I am not sure.

[patricklafrance]

Hi @Strnadj

Have you tried this recipe? https://github.com/sharegate/craco/tree/master/recipes/use-mobx

[Strnadj]

Yes, we have tried that, but it fails with the error message above.

[patricklafrance]

There is a few options for the babel decorator plugin: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.htm

Have you tryed without the legacy option?

module.exports = {
    babel: {
        plugins: [
            ["@babel/plugin-proposal-decorators"]
        ]
    }
};

[Strnadj]

Ok, if I delete that:

Error: [BABEL] /Users/strnadj/Projects/test/node_modules/react-dev-utils/webpackHotDevClient.js: The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option. (While processing: "/Users/strnadj/Projects/test/node_modules/@babel/plugin-proposal-decorators/lib/index.js")
    at Array.reduce (<anonymous>)

so I have change that to:

module.exports = {
    babel: {
        plugins: [
          ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true } ],
        ]
    }
};

and error:

Failed to compile.

./src/index.tsx
Error: Cannot use the decorators and decorators-legacy plugin together

[patricklafrance]

I tryed it on my side and it works fine.

Is there something else in your setup that add the decorators-legacy plugin?

[Strnadj]

https://github.com/Strnadj/not_working_cra there is repository, what cames in my mind... it seems to "@babel/plugin-proposal-decorators" is not ready yet for @babel 7.1..

warning "@babel/plugin-proposal-decorators > @babel/plugin-syntax-decorators@7.1.0" has unmet peer dependency "@babel/core@^7.0.0-0".

not sure if it is a problem, but I was not able to find react-scripts version with @babel 7.0 in dependencies.

[patricklafrance]

Maybe it's the problem, if it's the case you should open an issue in the @babel/plugin-proposal-decorators repository.

For this issue, it doesn't seem to be a problem with craco.

If you find the right webpack recipe for inversify i'll be glad to help you to make it work with CRA + craco.

I will leave the issue open for a few days in case someone have a solution for you.

[duyucongc]

Hi @patricklafrance
I use config

module.exports = {
    babel: {
        plugins: [
            ["@babel/plugin-proposal-decorators", { legacy: true }]
        ]
    }
};

and it work in craco start and craco build
but when I run craco test
It failed with error
Support for the experimental syntax 'decorators-legacy' isn't currently enabled
What should I change config to fit CRX test ?

[patricklafrance]

Hi @duyucongc

It works fine in my sandbox.

My version of the following packages version are:

@babel/core@7.1.0
@babel/plugin-proposal-decorators@7.1.2
@craco/craco@3.1.1
@react-scripts@2.1.1

With the following craco.config.js file

const path = require("path");
const ConfigWebpackPlugin = require("config-webpack");
const { ESLINT_MODES, POSTCSS_MODES, paths } = require("@craco/craco");

const CSS_MODULE_LOCAL_IDENT_NAME = "[local]___[hash:base64:5]";

module.exports = {
    style: {
        modules: {
            localIdentName: CSS_MODULE_LOCAL_IDENT_NAME
        },
        css: {
            loaderOptions: {
                includePaths: ["/css-utils"]
            }
        },
        sass: {
            loaderOptions: {
                includePaths: ["/sass-utils"]
            }
        },
        postcss: {
            mode: POSTCSS_MODES.file
        }
    },
    eslint: {
        mode: ESLINT_MODES.file
    },
    webpack: {
        alias: {
            "@components": path.resolve(__dirname, `${paths.appSrc}/components/`)
        },
        plugins: [new ConfigWebpackPlugin()]
    },
    babel: {
        plugins: [
            "babel-plugin-jsx-control-statements",
            "babel-plugin-react-require",
            ["babel-plugin-react-css-modules", { generateScopedName: CSS_MODULE_LOCAL_IDENT_NAME, attributeNames: { "activeStyleName": "activeClassName" } }],
            ["@babel/plugin-proposal-decorators",  { legacy: true }]
        ],
    },
    jest: {
        configure: {
            globals: {
                "CONFIG": true
            },
            moduleNameMapper: {
                "^@components(.*)$": "<rootDir>/src/components$1"
            }
        }
    },
    plugins: [
        {
            plugin: {
                overrideJestConfig: ({ jestConfig }) => {
                    console.log(JSON.stringify(jestConfig, null, 4));
            
                    return jestConfig; 
                }
            }
        }
    ]
};

[patricklafrance]

@duyucongc https://www.npmjs.com/package/@craco/craco/v/3.2.2 should fix your problem .

[patricklafrance]

I will close this issue since there isn't any new comments for 7 days

[duyucongc]

Thank you, this did solve my problem. I originally planned to use mobx directly without using the decorator.

[zhang14725804]

@patricklafrance thank you it did work for me