在vscode编辑器中使用react-redux @connect发生报错的问题解决

在慕课网Redux+React Router+Node.js全栈开发的学习中我遇到了一个问题

当使用react-redux的@connet装饰器时发生了报错,为什么编辑的和学习视频中相同,但会报错,而且运行后也产生了error。

当时我的package.json中用的是“transform-decorators-leagacy”这个插件,在项目中安装的是"babel-plugin-transform-decorators-legacy": "^1.3.5",

"plugins": [
      "transform-decorators-legacy",
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]

产生了错误:Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.

这是因为上面的配置是使用babel6时的配置,而在 npm run eject时,安装的版本时babel7.x,与之前的配置不适应。

这需要重新安装适应的配置器,于是进入npm官网查询

https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy

它提示如果你使用吧babel7.x时需要yarn add @babel/plugin-proposal-decorators --dev

更改package.json配置如下:

    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]

如果vscode还有错误提示,需要在根目录添加:jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

 

你可能感兴趣的:(在vscode编辑器中使用react-redux @connect发生报错的问题解决)