加载Firebase遇MIME类型错误及404，请求解决方案

已通过npm安装Webpack与Firebase，Firebase文件位于node_modules目录，业务JavaScript文件存放在src目录。遇到两个问题：

• 若在代码中直接导入firebase/app，会出现404资源未找到错误；
• 改为导入/node_modules/firebase/app后，浏览器抛出MIME类型错误：

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.

附上当前使用的代码：

现有Index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Game Guidez</title>
</head>
<body class="grey lighten-3">
    
 <!--
    <script src="https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.1/firebase-firestore.js"></script>-->

  <!-- Compiled and minified JavaScript -->
   <script src="bundle.js" type="module"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="/src/index.js"></script>
  <script type="module" src="/src/auth.js"></script>


</body>
</html>

现有auth.js代码 #

import { initializeApp } from '/node_modules/firebase/app';
 import { getAuth, createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, onAuthStateChanged } from '/firebase/auth';
 import { getFirestore, collection, getDocs } from '/firebase/firestore';

var firebaseConfig = {
//my stuff
};

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
const db = getFirestore(app, {
 timestampsInSnapshots: true
})
getDocs(collection(db, 'guides')).then(snapshot => {
 console.log('hi')
 let docs = snapshot.docs;
 console.log(docs)
}

• 修正Firebase导入路径：Webpack会自动从node_modules中解析模块，无需写绝对路径或node_modules前缀，直接使用包名导入即可。
• 统一通过Webpack打包引入：不要在HTML中单独引入src目录下的JS文件，所有业务代码和依赖都交给Webpack打包成bundle.js，只在HTML中引入打包后的文件，避免模块加载冲突和MIME类型问题。
• 修复代码语法错误：getDocs的then回调函数末尾缺少闭合括号，导致语法错误。

修正后的代码 #

Index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Game Guidez</title>
</head>
<body class="grey lighten-3">
  <!-- 移除单独的src文件引入，只保留打包后的bundle.js和Materialize脚本 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="bundle.js"></script>
</body>
</html>

auth.js #

// 直接使用包名导入，Webpack会自动处理模块解析
import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

var firebaseConfig = {
// 你的Firebase配置信息
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app, {
  timestampsInSnapshots: true
});

// 修复then回调的闭合括号
getDocs(collection(db, 'guides')).then(snapshot => {
  console.log('hi');
  let docs = snapshot.docs;
  console.log(docs);
});

额外检查 #

确保Webpack配置文件（如webpack.config.js）正确设置了入口文件（例如指向src/index.js，并在其中引入auth.js），示例Webpack配置片段：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') // 或你的输出目录
  },
  // 其他配置...
};

内容的提问来源于stack exchange，提问作者Maddy Young