需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应答案

【问题标题】：Expected a JavaScript module script but the server responded with a MIME type of "text/html"需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应
【发布时间】：2021-09-14 19:33:51
【问题描述】：

尝试在我的项目中导入 firebase 时遇到问题。以前我在我的项目中安装了 firebase 依赖项。我正在使用 ELM-SPA。

错误

我的 Firebase 配置文件：

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };


  //init firebase
  firebase.initializeApp(firebaseConfig)

  //init services
  const projectFirestore = firebase.firestore()
  const projectAuth = firebase.auth()
  const projectStorage = firebase.storage()


  //timestamp
  const timestamp = firebase.firestore.FieldValue.serverTimestamp

  export{
      projectFirestore,
      projectAuth,
      projectStorage,
      timestamp
  }

我尝试调用一些 firebase 函数的地方

import { projectAuth } from '../public/config'

const app = Elm.Main.init({
  flags: JSON.parse(localStorage.getItem('storage'))
})

app.ports.save.subscribe(storage => {
  localStorage.setItem('storage', JSON.stringify(storage))
  app.ports.load.send(storage)
})

我的html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/style.css">
  <link rel="shortcut icon" href="assets/logo.png" />
</head>
<body>
  <script src="/dist/elm.js"></script>
  <script type="module" src="/main.js"></script>
</body>
</html>

【问题讨论】：

我认为添加带有问题的代码而不是链接图像会更好。其原因是图像托管服务将来可能会下降，然后问题会在将来丢失很多信息。将信息放在那里也更具可读性。
另见meta.stackoverflow.com/questions/303812/…。
您是否查看了网络选项卡中的请求以查看它返回的内容？
网络中的一切都很好。但仍然在控制台中丢弃 MIME 类型错误
这些import路径正在被浏览器解析，浏览器不知道'firebase/app'是什么。您可能希望使用一个允许您引用节点模块的捆绑程序，然后从您的 public 文件夹中提供捆绑的输出。捆绑程序的示例包括 WebPack、Parcel、Rollup 和 Snowpack。

标签： firebase elm

【解决方案1】：

在main.js 中，您正在导入'../public/config'，这就是错误所指的内容。这一切都发生在浏览器中，因此浏览器正在尝试加载该 URL 并失败。您可以将导入更改为'./config.js'，但如果您在该配置文件中有秘密信息，则不应将其公开。在这种情况下，您需要引入一些服务器端组件来存储您的机密。

【讨论】：

错误是关于config 还是config.js？也许您需要硬刷新才能看到更改的文件？