React - 模块解析失败：意外的标记。您可能需要一个适当的加载器来处理此文件类型。

Question

React - 模块解析失败：意外的标记。您可能需要一个适当的加载器来处理此文件类型。

24

这是我第一次使用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]
}

我真的不知道发生了什么，所以非常感谢任何帮助。如果我遗漏了任何相关信息，请告诉我，这样可能会有帮助。谢谢。

- paul45

2个回答

1

在webpack.config.js中添加了以下代码，将jsx解析为js。访问React.js中找不到模块的解决方法。

module.exports = {
    //...
    resolve: {
        extensions: ['.js', '.jsx']
    }
};

- Ivan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Porcellus · Accepted Answer

错误来自于这行代码：return <h1>React App</h1>，因为<h1>...</h1>不是有效的javascript代码。即使将它重命名为.jsx，也会被解析成普通的js而非jsx，因为你的webpack-config.js文件存在问题，所以有多个事情需要修复：

将App.js重命名为App.jsx，
在webpack-config.js中将test: /\.js$/,更新为test: /\.(js|jsx)$/,
我认为你的.babelrc文件中也存在错误：在"transform-class-properties"后面不需要加上.js。
将webpack-config.js重命名为webpack.config.js

这里有一篇教程展示了如何进行修复：https://www.valentinog.com/blog/babel/。此外，你可以使用https://github.com/facebook/create-react-app简化所有操作并提供出色的起始配置。