从Create React App弹出后的高阶组件文件中的问题

时间:2018-10-15 11:32:04

标签: reactjs babel create-react-app

我正在使用CRA 2.0,并且想要弹出以便可以操纵配置。弹出后,我遇到了编译错误的问题:

./src/web-app-commons/HOC/OverlayWrapper.jsx
SyntaxError: /Users/prabhjotrai/temp/client-web/src/web-app-commons/HOC/OverlayWrapper.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (33:22):

  31 | export default WrappedComponent => {
  32 |   return class extends Component {
> 33 |     static propTypes = {
     |                      ^
  34 |       overlayProps: PropTypes.shape({
  35 |         open: PropTypes.bool
  36 |       })

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

我已经尝试了与添加此插件有关的所有事情(包括将@babel/plugin-proposal-class-properties作为dev依赖项添加并在babel配置中引用它),并且我认为它与https://github.com/babel/babel/issues/8648有关。但是,当我删除此特定文件时,下一个错误是:

./src/web-app-commons/HOC/Preview.jsx
SyntaxError: /Users/prabhjotrai/temp/client-web/src/web-app-commons/HOC/Preview.jsx: Support for the experimental syntax 'objectRestSpread' isn't currently enabled (60:3):

  58 |   persistent = true,
  59 |   overflowX = 'inherit',
> 60 |   ...props
     |   ^
  61 | } = {}) => WrappedComponent => {
  62 |   return class extends Component {
  63 |     displayName = `${WrappedComponent.displayName ||

Add @babel/plugin-proposal-object-rest-spread (https://git.io/vb4Ss) to the 'plugins' section of your Babel config to enable transformation.

我的直觉是,这与高阶组件有关,因为我在代码中的其他任何地方都没有遇到此“ spread”错误或类属性声明错误。知道可能出什么问题了吗?

这是我的babel依赖项:

~/temp/client-web   master ●  cat package.json | grep babel
    "@babel/core": "7.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-emotion": "^9.2.5",
    "babel-plugin-named-asset-import": "^0.2.2",
    "babel-preset-react-app": "^5.0.4",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-plugin-glamorous-to-emotion": "^1.0.1",
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  "babel": {
    "plugins": ["@babel/plugin-proposal-class-properties"]

任何帮助将不胜感激。

编辑

我添加了一个babelrc文件(从package.json中删除了配置),其中包含以下详细信息,但是没有运气:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "react-app"
  ],
  "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-object-rest-spread"
  ]
}

1 个答案:

答案 0 :(得分:-1)

Object spread仍然是建议,因此默认情况下在Babel中不可用。

只需将@ babel / plugin-proposal-object-rest-spread添加到像他们所说的插件中