Question

我有一个简单的ReactJS项目，我在其中使用Babel 6。

这是文件： package.json ：

{
  "name": "tlg-react-components",
  "version": "1.0.1",
  "description": "",
  "main": "build/index.js",
  "peerDependencies": {
    "react": "^16.4.0"
  },
  "scripts": {
    "start": "webpack --mode production --watch",
    "build": "webpack --mode production"
  },
  "author": {
    "name": "codewithbernard"
  },
  "license": "ISC",
  "dependencies": {
    "pretty-checkbox": "^3.0.3",
    "react": "^16.4.0",
    "react-dom": "^16.6.3",
    "react-text-mask": "^5.4.3",
    "reactjs-popup": "^1.3.2",
    "text-mask-addons": "^3.8.0",
    "webpack": "^4.12.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.0.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.0.4"
  }
}

在文件： MyGalaxyText.js 上，我具有以下代码：

import React, { Component } from 'react';
...

class MyGalaxyText extends Component {

  constructor(props) {
    super(props);

    this.state = Object.assign({}, {
      /* default argument values */
      open:                 false,
      logo:                 '',
      ...
    }, props);

  }

  ...

  componentWillReceiveProps = (nextProps) => {
    if (JSON.stringify(this.state.myGalaxyText) !== JSON.stringify(nextProps.myGalaxyText)) {
      this.setState({ myGalaxyText: nextProps.myGalaxyText });
    }
  }

  ...

  render() {
    return (
      <div className="my-galaxy-text">
        ...
      </div>
    );
  }

}

export default MyGalaxyText;

我的问题是：

运行时：npm run start，我收到箭头功能错误：componentWillReceiveProps：

SyntaxError: .../MyGalaxyText.js: Unexpected token

在这里您可以看到真实的输出：

> my-components@1.0.1 start D:\www\my-components\my-components
> webpack --mode production --watch


Webpack is watching the files…

Hash: 908bfb67e8a33a9ba564
Version: webpack 4.12.0
Time: 953ms
Built at: 2018-12-17 23:50:26
 1 asset
 [0] external "react" 42 bytes {0} [built]
 [3] /my-components/src/MyGalaxyText/MyGalaxyText.js 676 bytes {0} [built] [failed] [1 error]
 [4] /my-components/node_modules/css-loader/dist/cjs.js!/my-components/node_modules/sass-loader/lib/loader.js!/my-components/src/MyStarInput/MyStarInput.scss 1.75 KiB {0} [built]
 [5] /my-components/src/MyStarInput/MyStarInput.scss 1.25 KiB {0} [built]
[10] (webpack)/buildin/global.js 489 bytes {0} [built]
[16] /my-components/src/MyStarInput/MyStarInput.js 7.32 KiB {0} [built]
[18] /my-components/node_modules/css-loader/dist/cjs.js!/my-components/node_modules/sass-loader/lib/loader.js!/my-components/src/ReactColorSquare/ReactColorSquare.scss 307 bytes {0} [built]
[19] /my-components/src/ReactColorSquare/ReactColorSquare.scss 1.23 KiB {0} [built]
[20] /my-components/src/ReactColorSquare/ReactColorSquare.js 735 bytes {0} [built]
[21] /my-components/src/index.js 964 bytes {0} [built]
    + 12 hidden modules

ERROR in /my-components/src/MyGalaxyText/MyGalaxyText.js
Module build failed (from /my-components/node_modules/babel-loader/lib/index.js):
SyntaxError: /my-components/src/MyGalaxyText/MyGalaxyText.js: Unexpected token (29:28)

  27 |   }
  28 |
> 29 |   componentWillReceiveProps = (nextProps) => {
     |                             ^
  30 |     if (JSON.stringify(this.state.myGalaxyText) !== JSON.stringify(nextProps.myGalaxyText)) {
  31 |       this.setState({ myGalaxyText: nextProps.myGalaxyText });
  32 |     }

 @ /my-components/src/index.js 16:31-91

如果我使用其他任何虚拟箭头功能，都会遇到相同的错误。

关于如何解决此问题的任何想法？

谢谢！

使用“ Babel 6”的箭头功能出现意外标记

0 个答案: