iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React项目中decorators装饰器报错问题解决方案
  • 621
分享到

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

摘要

目录问题:问题: 我先安装了decorators: 然后运行项目就报错emmmmm: src\pages\home\cookbook\swiper.jsxLine 21: Par

问题:

我先安装了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装饰器报错内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

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

本文链接: https://www.lsjlt.com/news/177539.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作