Webpack / React.js 中的语法错误 React 中的意外令牌 =

Posted 2023-02-21

【中文标题】Webpack / React.js 中的语法错误 React 中的意外令牌 =

【英文标题】：SyntaxError in Webpack / React.js Unexpected token = in React

【发布时间】：2018-03-13 23:05:10

【问题描述】：

在我的一个 .js 文件中，我从 Webpack 收到以下错误：

  4 | export default function(ComposedComponent) 
  5 |   class Authentication extends Component 
> 6 |     static contextTypes = 
    |                         ^
  7 |       router: React.PropTypes.object
  8 |     
  9 | 

这些是我的开发依赖项：

  "devDependencies": 
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^0.26.1",
    "file-loader": "^1.1.4",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^3.4.2",
    "rimraf": "^2.6.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.9",
    "webpack": "2.2.0-rc.0",
    "webpack-dev-server": "^2.2.0-rc.0"
  

这是我的 Webpack 配置：

  "presets": ["env", "react", "stage-3"],
  "plugins": ["transform-object-rest-spread"]

谁能告诉我缺少哪个插件或包？ 谢谢！

【问题讨论】：

请查看this 和this。您只需要添加正确的 babel 预设即可使用静态类属性。

【参考方案1】：

什么都没有，只是语法不正确。

静态方法应该是（顾名思义）函数。

试试：

class Authentication extends Component 
   ...


Authentication.contextTypes = 
    router: React.PropTypes.object

【讨论】：

同样的问题...现在，它指向 . Authentication.contextTypes 之间。有趣的是，当我下载教程时，旧的设置没问题，只是不能与我的新 Webpack 转译器一起使用。

Longshot 但尝试babel-preset-es2015 并将es2015 添加到您的预设中

@Daniel 是对的。您只需要添加正确的预设。查看我的评论以获取链接。

感谢您的努力，但我只是不断收到错误消息。这次是 Uncaught Error: _registerComponent(...): Target container is not a DOM element - 即使脚本位于文档底部。 :(

【参考方案2】：

类属性目前是第 2 阶段的提案，因此它不包含在 babel-preset-env 中。您可以：

使用.babelrc 仅包含此特定转换：

“插件”：[“转换类属性”]

包括所有第 2 阶段的提案：

“预设”：[“env”，“react”，“stage-2”]

在添加所有stage-2 提案之前请考虑风险：https://babeljs.io/docs/plugins/preset-stage-2/