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] 我｢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格式即可解决问题。

如果您还是要通天塔，这里是基本步骤：

需要安装软件包：

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

将babel loader添加到webpack配置：

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

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

1 个答案: