Github 页面。链接为空且错误：无法加载模块脚本

Question

我正在尝试在 Github Pages 上上传一个项目，但是当我访问该链接时，我得到一个没有任何内容的白页，并在控制台中出现以下错误：

无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“text/jsx”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

它指的是main.jsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

知道会发生什么吗？

Answer 1

它之所以出现，是因为您使用实时服务器打开反应应用程序。 相反，您应该使用 npm 运行它。

打开终端并运行：

$ npm run dev

然后单击它为您提供的链接。 每当您想打开应用程序时，您都必须执行此步骤。 它的工作方式就像一个实时服务器，但实际上，它在本地主机上托管您的应用程序。

Answer 2

也许你和我有同样的问题，我做了 github 所需的所有配置，但我忘记构建主项目。 通过运行命令来构建主项目，特别是在 package.json 文件的同一级别::

npm run build

之后你将拥有一个名为 dist 的文件夹，这就是我的问题的解决方案，我的项目使用 Vite。

您还可以查看用于解决我的问题的链接：https://vitejs.dev/guide/static-deploy.html

最诚挚的问候。

Answer 3

您遇到的错误是尝试直接提供 JSX 文件而不将其编译为浏览器可以理解的标准 JavaScript 时的常见问题。 GitHub Pages 提供静态文件，并且不会将 JSX 编译为 JavaScript。以下是解决此问题的方法：

构建您的项目

您的 React 项目必须先编译为纯 JavaScript，然后才能部署。如果您使用的是 Create React App，您可以使用以下命令构建您的项目

npm run build

Answer 4

我的朋友，如果你正在使用react，你必须打开你的控制台并写入 “npm 运行开发”

注意：该命令将根据您当前的 React 安装而有所不同，您可以通过查看 package.json 文件来检查当前的启动命令是什么。

如果您尝试像常规 HTML 文件一样使用实时服务器打开 html，您的浏览器将显示该错误。

我的兄弟看起来不错。