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.json:

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

最后是我的 .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，所以你应该做很多事情来修复它：

将 App.js 重命名为 App.jsx,
在webpack-config.js

test: /\.js$/,

test: /\.(js|jsx)$/,

我认为您的 .babelrc 中也存在错误：您不希望 .js 出现在 "transform-class-properties" 之后。
将 webpack-config.js 重命名为 webpack.config.js

这是一个说明这一点的教程：https://www.valentinog.com/blog/babel/. Also, you could use https://github.com/facebook/create-react-app 简化了所有这些并提供了一个很好的起始配置。

React - 模块解析失败：意外的令牌。您可能需要一个合适的加载器来处理这种文件类型

React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

javascript

reactjs

babeljs

babel-loader