support for the experimental 'jsx' isn't currently enabled

后端 未结 3 1388
借酒劲吻你
借酒劲吻你 2021-02-12 23:44

So I have endlessly searched the web to fix this issue.

"support for the experimental \'jsx\' isn\'t currently enabled...
Add @babel/preset-react to the \'pr         


        
相关标签:
3条回答
  • 2021-02-13 00:19

    Creating a babel.config.js with this script solve my issue

    module.exports = {
        presets:[
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }
    
    0 讨论(0)
  • 2021-02-13 00:24

    Are you running this inside of a node_modules folder? If so you need to change

    exclude: [/node_modules/],
    

    so it doesn't exclude your project.

    It should become something along the lines of

    exclude: [/node_modules/ &&
            !/node_modules\/(project_name)/],
    

    But with correct regex syntax and change project_name to the folder name.

    0 讨论(0)
  • 2021-02-13 00:27

    I must have tried tons of different ways. Sharing what worked for me. Do take note of the versions, different versions might need tweaks.

    My react project was created using create-react-app (CRA). Now since CRA hides babel and webpack config files and there is no way to modify them, there are basically 2 options:

    • react eject (which I didn't try. Felt managing all by myself could get bit overwhelming).
    • Use react-app-rewired to tweak babel configs without having to eject. (I used this)

    I additionally used customize-cra. React-app-rewired suggests it for later versions of CRA.

    Update scripts and add dev dependencies in package.json:

     "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject",
        "docs": "jsdoc -c jsdoc.conf.json"
      },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.10.1",
        "customize-cra": "^1.0.0",
        "react-app-rewired": "^2.1.6",
        "@babel/preset-react": "^7.10.1"
      }
    

    config-overrides.js (must be at root level, i.e. at same directory level of package.json).

    If error is from some library in node_modules, make sure to 'include' it (babelInclude):

    const path = require('path');
    const {
        override,
        babelInclude,
        addBabelPreset,
        addExternalBabelPlugin,
    } = require('customize-cra');
    
    module.exports = override(
        babelInclude([
            path.resolve('src'),
            path.resolve('node_modules/react-native-animatable'),
        ]),
        addBabelPreset("@babel/preset-react"),
        addExternalBabelPlugin('@babel/plugin-proposal-class-properties'),
    );
    
    0 讨论(0)
提交回复
热议问题