Ruby on rails 未捕获错误：模块构建失败（来自./node_modules/babel loader/lib/index.js）：

我正在尝试添加一些react组件以在RubyonRails设置中工作，我在以前版本的程序中使用过这些组件，但还有一些其他问题。。。由于在Rails5.1和webpack模板中重新设置了所有内容，我似乎遇到了一些babel错误问题

下面的错误

我对react的工作还很陌生，所以任何朝着正确方向的推动都会很好。我见过其他人在babel和webpack版本不兼容时遇到类似问题，但我不确定如何在rails设置中更改我的webpack或babel配置，或者我的设置是否需要更改

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/worktime/code/granttnarg/Lets-Practice-Again/app/javascript/packs/dashboard.jsx: Unexpected token (35:13)

  33 |   render(){
  34 |     let autoCompleteList = this.state.autoCompleteResults.map((response, index) => {
> 35 |       return <div key={index} className="row show-page">
     |              ^
  36 |               <div id="search-results" className="container">
  37 |               <a href={"songs/" + response.id}>
  38 |                 <div className="card-product index-card"key={index}>
    at Parser.raise (Users/worktime/code/granttnarg/Lets-Practice-Again/node_modules/@babel/parser/lib/index.js:6930)```

My package.json looks like this :

``` {
  "name": "Lets-Practice-Again",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.7.0",
    "@rails/webpacker": "^4.2.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^4.3.1",
    "cloudinary-react": "^1.2.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}```

Uncaught错误：模块构建失败（来自./node\u modules/babel loader/lib/index.js）：
SyntaxError:/Users/worktime/code/granttnarg/Lets Practice-each/app/javascript/packs/dashboard.jsx：意外标记（35:13）
33 | render（）{
34 |让autoCompleteList=this.state.autoCompleteResults.map（（响应，索引）=>{
>35 |返回
|              ^
36 |               
37 |               
38 |                 
在Parser.raise（Users/worktime/code/granttnarg/Lets Practice-each/node_modules/@babel/Parser/lib/index.js:6930）```
My package.json如下所示：
``` {
“姓名”：“让我们再练习一次”，
“私人”：没错，
“依赖项”：{
“@babel/preset react”：“^7.7.0”，
“@rails/webpacker”：“^4.2.0”，
“巴别塔插件类型”：“^0.4.24”，
“引导”：“^4.3.1”，
“云反应”：“^1.2.1”，
“jquery”：“^3.4.1”，
“popper.js”：“^1.16.0”，
“道具类型”：“^15.7.2”，
“反应”：“^16.12.0”，
“react dom”：“^16.12.0”，
“vue”：“^2.6.10”，
“vue加载程序”：“^15.7.2”，
vue模板编译器“^2.6.10”
},
“依赖性”：{
网页包开发服务器“^3.9.0”
}
}```

您的

babel.config.js中有什么？这将决定babel如何处理jsx。它需要类似于rails webpacker react安装程序提供的模板（您使用过吗？）看起来babel没有正确解释JSX。请发布您的
webpack.config.js
和/或
.babelrc
文件。欢迎使用堆栈溢出！问题寻求调试帮助（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现所需的最短代码。请参阅：