What to do if the react decorator reports an error

Solution to the react decorator error: 1. Create the project through "create-react-app mobx-study"; 2. Install the plug-in through "yarn add -D react-app-rewired customize-cra"; 3. Modify the scripts script in the package.json file; 4. Create "config-overrides.js" and ".babelrc" in the project root directory.

The operating environment of this tutorial: Windows10 system, react18.0.0 version, Dell G3 computer

#What should I do if the react decorator reports an error?

React's decorators decorator reported an error

# #1. Decorators decorator reports errors @

When using React's decorators for the first time, an error will be reported when @

is used for the first time in a project. The reason is that react does not support it by default. The decorator is used, so an error is reported, so some configuration needs to be done to support the decorator.

【Error display: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.】

1. Create the project

npm install -g create-react-app  
// 安装create-react-app，已安装请忽略
create-react-app mobx-study

2. Install the plug-in——Change the webpack configuration in create-react-app

yarn add -D react-app-rewired customize-cra 
yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/preset-env

3. Modify the scripts script in the package.json file

// package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

4. Create config-overrides.js in the project root directory and write the following content

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')

function resolve(dir) {
    return path.join(__dirname, dir)
}

const customize = () => (config, env) => {
    config.resolve.alias['@'] = resolve('src')
    if (env === 'production') {
        config.externals = {
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }

    return config
};
module.exports = override(addDecoratorsLegacy(), customize())

5. Create .babelrc in the project root directory and write the following content

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]}

After basically completing the above steps, you can use the decorator normally and no @ will be reported again. Wrong. At the same time, the error Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled will also disappear.

#2. Experimental support for decorators may change in future versions. Set the "experimentalDecorators" option in "tsconfig" or "jsconfig" to remove this warning. ts(1219)

Settings=> Search experimentalDecorators => Check the box

react video tutorial

"

The above is the detailed content of What to do if the react decorator reports an error. For more information, please follow other related articles on the PHP Chinese website!