React项目中decorators装饰器报错问题解决方案

 更新时间:2023年01月12日 11:48:25   作者:Chloe56  
这篇文章主要介绍了React项目中decorators装饰器报错,本文给大家分享问题所在原因及解决方案,通过图文实例相结合给大家介绍的非常详细,需要的朋友可以参考下

问题:

我先安装了decorators:

然后运行项目就报错emmmmm:

src\pages\home\cookbook\swiper.jsx
Line 21: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators". (21:0)

下面是百度之后转载的文章:

在初次使用React 的装饰器时,第一次在项目中使用 @会报错,原因是react默认是不支持装饰器的,所以才会报错,所以是需要做一些配置来支持装饰器。

1.创建项目

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

2.安装插件 —— 改变 create-react-app 中 webpack 配置

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

3.修改package.json文件中 scripts 脚本

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

4.在项目根目录下创建 config-overrides.js 并写入以下内容

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())

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.在项目根目录下创建 .babelrc 并写入以下内容

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

基本完成以上步骤就可以正常使用装饰器了,再也不会报 @ 的错误了。同时Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled这个错误也将消失。

虽然我用了以上方法,但是它emmmm。。。好吧还是在报错,但是关掉报错并不耽误使用,有人懂为什么吗,哭了555555555

到此这篇关于React项目中decorators装饰器报错的文章就介绍到这了,更多相关react decorators装饰器报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react中涉及的增加,删除list方式

    react中涉及的增加,删除list方式

    这篇文章主要介绍了react中涉及的增加,删除list方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • react数据管理中的setState与Props详解

    react数据管理中的setState与Props详解

    setState 是 React 中用于更新组件状态(state)的方法,本文给大家介绍react数据管理中的setState与Props知识,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • React通过redux-persist持久化数据存储的方法示例

    React通过redux-persist持久化数据存储的方法示例

    这篇文章主要介绍了React通过redux-persist持久化数据存储的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 一文详解React Redux使用方法

    一文详解React Redux使用方法

    这篇文章主要介绍了一文详解React Redux使用方法,文章围绕主题展开详细的内容戒杀,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • react redux及redux持久化示例详解

    react redux及redux持久化示例详解

    这篇文章主要为大家介绍了react redux及redux持久化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • React注册倒计时功能的实现

    React注册倒计时功能的实现

    这篇文章主要介绍了React注册倒计时功能的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React Hooks - useContetx和useReducer的使用实例详解

    React Hooks - useContetx和useReducer的使用实例详解

    这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • React中使用collections时key的重要性详解

    React中使用collections时key的重要性详解

    这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性,注意:一定不能不能忘了key,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
    2017-08-08
  • react 路由跳转的7种方式实现

    react 路由跳转的7种方式实现

    本文介绍了React中六种常见的路由跳转方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-03-03
  • react+typescript中使用echarts的实现步骤

    react+typescript中使用echarts的实现步骤

    本文主要介绍了react+typescript中使用echarts的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论