模块解析失败：意外令牌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文件。解决方案是将babelbabel loader添加到您的项目中，或者将文件切换到ts格式将解决您的问题。

这里是基本步骤，如果你去巴别塔无论如何：

安装所需的软件包：

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

将babel loader添加到网页包配置：

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