Webpack打包React项目出现模块脚本加载MIME类型错误求助

使用Webpack作为模块打包工具，前端基于React、后端使用Node.js，控制台出现以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Webpack配置代码：

import path from "path";
export default {
  entry: "./App/Main/index.jsx",
  output: {
    filename: "App.js",
    path: path.resolve("./App/Public/src"),
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.jsx|js$/,
        use: "babel-loader",
      },
      {
        test: /\.sass|.scss|.css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="./src/App.js"></script>
  </head>
  <body></body>
</html>

尝试将script标签的type改为text/javascript后，控制台无报错但页面完全不渲染，寻求解决方法。

1. 修正Node.js静态资源服务配置 #

确保Node.js后端将./App/Public目录设置为静态资源根目录，否则请求./src/App.js时会返回404，后端默认返回HTML页面导致MIME类型错误。以Express为例，添加以下配置：

const express = require('express');
const app = express();
// 配置静态资源目录
app.use(express.static('./App/Public'));

2. 验证Webpack输出与HTML路径一致性 #

• 检查Webpack打包后的App.js是否生成在./App/Public/src目录下，确认文件存在且内容正常。
• 确认HTML中script的src路径正确：若HTML文件在./App/Public目录下，./src/App.js是正确相对路径；若HTML在其他位置，改用绝对路径（如/src/App.js）。

3. 补全React组件挂载逻辑 #

去掉type="module"后页面空白，核心原因是React组件未挂载到DOM节点：

• 在入口文件index.jsx中添加挂载代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // 你的根组件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• 在HTML的body中添加挂载节点：

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./src/App.js"></script>
</body>

4. 可选：配置Webpack输出ES模块（如需保留type="module"） #

Webpack默认输出IIFE格式（非ES模块），若要使用type="module"，需修改Webpack配置：

export default {
  // ...其他配置
  output: {
    filename: "App.js",
    path: path.resolve("./App/Public/src"),
    libraryTarget: 'module',
  },
  experiments: {
    outputModule: true,
  },
};

同时确保后端正确返回ES模块的MIME类型（application/javascript）。

内容的提问来源于stack exchange，提问作者Ehan Islam