React - 模塊解析失敗：意外的令牌。 您可能需要適當的加載程序來處理此文件類型

Question

我第一次使用 react，如果我做的事情明顯而且非常錯誤，請道歉。 也就是說，我在這里和 github 上閱讀了幾個看起來相似的錯誤，但我找不到任何適合我的東西。 這是完整的錯誤消息：

ERROR in ./src/frontend/src/components/App.js 6:15
Module parse failed: Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
| class App extends Component{
|     render() {
>         return <h1>React App</h1>
|     }
| }
 @ ./src/frontend/src/index.js 1:0-35

從中提取該錯誤消息的完整代碼：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component{
    render() {
        return <h1>React App</h1>
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

我覺得我的 webpack-config.js 有問題，但我直接從我正在使用的教程中復制了它，所以我不確定為什么會出錯。 在這里，供參考：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

這是我的 package 依賴項來自 package.json：

"dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

最后是 my.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"],
    "plugins": ["transform-class-properties".js]
}

我真的不知道發生了什么，所以任何幫助將不勝感激。 如果我遺漏了任何可能有用的相關信息，請告訴我。 謝謝你。

Answer 1

錯誤來自這一行： return <h1>React App</h1> ，因為<h1>...</h1>不是有效的 javascript。 即使重命名它會被解析為 vanilla js 而不是 jsx，因為你的webpack-config.js ，所以你應該做很多事情來修復它：

1. 將App.js重命名為App.jsx ，
2. 更新test: /\\.js$/, test: /\\.(js|jsx)$/,在 webpack-config.js 中test: /\\.(js|jsx)$/, (js|jsx)$/
3. 我認為您的.babelrc也有一個錯誤：在"transform-class-properties"之后，您不希望.js出現在那里。
4. 將webpack-config.js重命名為webpack.config.js

這是一個顯示這一點的教程： https : //www.valentinog.com/blog/babel/ 。 此外，您可以使用https://github.com/facebook/create-react-app來簡化所有這些並提供一個很好的起始配置。