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

Question

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

./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' },
        ]
    }
}

Answer 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"
        ]
      },
    },
  },
]