模块解析失败：意外的令牌 Reactjs？

Posted 2023-03-07

【中文标题】模块解析失败：意外的令牌 Reactjs？

【英文标题】：Module parse failed: Unexpected token Reactjs?

【发布时间】：2020-11-16 08:17:42

【问题描述】：

./src/index.js 中的错误 6:4 模块解析失败：意外令牌 (6:4) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders | | ReactDOM.render(

<App />,

| document.getElementById('app') | );

@multi ./src/index.js main[0] i ｢wdm｣: 编译失败。

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

webpack.config.js

module.exports = 
    entry: [
        './src/index.jsx'
    ],
    output:
        path: __dirname,
        filename: 'app/js/main.js'
    ,
    module:
        rules: [
           test: /\.css$/, use: 'css-loader' ,
           test: /\.ts$/, use: 'ts-loader' ,
        ]
    

【问题讨论】：

你试过重命名为index.jsx吗？

ERROR in ./src/index.jsx 6:4 Module parse failed: Unexpected token (6:4) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理这个文件。见webpack.js.org/concepts#loaders

| ReactDOM.render( > , | document.getElementById('app') | ); @multi ./src/index.jsx main[0] i ｢wdm｣: 编译失败。

发布你的 webpack 配置

module.exports = 条目：[ './src/index.jsx' ]，输出： 路径：__dirname，文件名：'app/js/main.js' ，模块：规则：[测试：/\.css$/，使用：'css-loader'，测试：/\.ts$/，使用：'ts-loader'，]

【参考方案1】：

消息很清楚，您尚未设置加载程序来转译您的jsx 文件。您的配置文件不涵盖 jsx? 文件，但您涵盖了 ts 文件。解决方案是将babel + babel-loader 添加到您的项目或将文件切换为ts 格式即可解决您的问题。

如果你仍然选择 babel，以下是基本步骤：

安装所需的软件包：

npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader

将 babel 加载器添加到 webpack 配置中：

rules: [
  
    test: /\.(js|jsx)$/,
    use: 
      loader: 'babel-loader',
      options: 
        presets: [
          "@babel/env",
          "@babel/react"
        ]
      ,
    ,
  ,
]

【讨论】：

./src/index.jsx 中的错误模块构建失败（来自 ./node_modules/babel-loader/index.js）：类型错误：无法读取 Object.module 中未定义的属性“babel”。导出 (G:\new-react\reactquiz\node_modules\babel-loader\index.js:40:36) @ multi ./src/index.jsx main[0] 在 (webpack)-dev-server/client 中出现错误？ localhost:8080 模块构建失败（来自 ./node_modules/babel-loader/index.js）：TypeError: Cannot read property 'babel' of undefined at Object.module.exports (G:\new-react\reactquiz\node_modules\babel -loader\index.js:40:36)

@multi (webpack)-dev-server/client?localhost:8080./src/index.jsx main[0] i ｢wdm｣：编译失败。

好像我错过了babel-cli 我再次编辑了答案。请检查一下

[./src/index.jsx] 239 bytes main [built] [failed] [1 error] [C:\Users\user\AppData\Roaming\npm\node_modules\webpack- dev-server\client\index.js?localhost:8080] (webpack)-dev-server/client?localhost:8080 239 bytes main [built] [failed] [1 error]

./src/index.jsx 中的错误模块构建失败（来自 ./node_modules/babel-loader/index.js）：类型错误：无法读取 Object.module 中未定义的属性“babel”。导出 (G:\new-react\reactquiz\node_modules\babel-loader\index.js:40:36) @ multi ./src/index.jsx main[0]