laravel 中的反应正在获取语法错误意外令牌答案

【问题标题】：React in laravel is getting syntaxerror unexpected tokenlaravel 中的反应正在获取语法错误意外令牌
【发布时间】：2018-10-17 22:35:07
【问题描述】：

我知道这个问题被问了很多，但我找不到答案。任何帮助将不胜感激，谢谢！

根据 laracasts 中关于在 Laravel 中做出反应的帖子 Jeffrey Way 说：做吧：

mix.react('src', 'output');

我们将安装所有必要的 Babel 插件并设置您的 .babelrc。

在我的项目中，我目前有一个组件，在我的反应混合文件中，我有这个：

mix.react('resources/assets/js/basicapp.js', 'public/js');

我的 basicapp.js 文件是一个简单的组件设置，如下所示：

require('./components/Reactapp');

当我运行 mix 时，它会产生一个错误：模块构建失败：SyntaxError: Unexpected token (43:17)

  41 |   }
  42 | 
> 43 |   toggleSelected = (id, key) => {
     |                  ^
  44 |     let temp = [...this.state[key]]
  45 |     temp[id].selected = !temp[id].selected
  46 |     this.setState({

我已经为此绞尽脑汁两天了！任何帮助将不胜感激。

编辑：根据 Jeffrey Way 的说明检查没有 .babelrc 文件后，这应该由 laravel 自动完成。

【问题讨论】：

请提供您的.babelrc
没有.babelrc文件，我刚查了。我也更新了答案。 @Nguyễn Thanh Tú 有样板吗？

标签： reactjs laravel-mix

【解决方案1】：

经过进一步审查，Laravel 不仅仅适用于 es6。我必须添加一个 .babelrc 文件，然后在 package.json 中添加一些依赖项

我将此添加到 package.json devDependencies：

"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",

这已经在那里了：

"babel-preset-react": "^6.24.1",

在 .babelrc 文件中我添加了这个：

{
    "presets": [
        "react",
        "stage-0",
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "babel-plugin-transform-class-properties"
        ]
    ]
}

【讨论】：

插件入口应该是：{ "plugins": ["@babel/plugin-proposal-class-properties"] } 见babeljs.io/docs/en/babel-plugin-proposal-class-properties和babeljs.io/docs/en/…

【解决方案2】：

我会将此作为评论留下，但我没有足够的积分来评论。但是如果你不使用 es6 语法，它会起作用吗？

toggleSelected(id, key){}

【讨论】：

【解决方案3】：

toggleSelected = (id, key) => {
......
}

您正在为事件处理程序使用所谓的类字段/属性语法。此语法是一项实验性功能，只有在您提供以下内容时才能使用： @babel/plugin-proposal-class-properties
见proposal class properties

您需要使用以下命令安装插件：

npm install --save-dev @babel/plugin-proposal-class-properties

【讨论】：