英文:
Firebase/React Router single page application doesn't load correctly on refresh
问题
使用React Router和Firebase Hosting来运行一个网站时，刷新或导航到特定路径时出现了MIME类型错误。
示例：我可以正常导航到website.com/projects。
但是当输入website.com/projects/或website.com/projects/project1等时，会出现错误。
这仅在托管时发生，而在本地运行时没有发生。
当使用内置导航按钮（例如，通过单击项目上的按钮将我导航到website.com/projects/project1）时，它按预期工作。但是，如果我刷新页面，问题又出现了。
错误信息如下：
未能加载模块脚本：期望是JavaScript模块脚本，但服务器响应的MIME类型是"text/html"。根据HTML规范，对模块脚本执行严格的MIME类型检查。
Firefox提供了更多详细信息：
样式表https://website.com/projects/assets/index-8ea4127f.css未加载，因为其MIME类型为“text/html”，而不是“text/css”。
从“https://website.com/projects/assets/index-c61e1629.js”加载模块时，由于不允许的MIME类型（“text/html”），它被阻止了。
模块来源“https://website.com/projects/assets/index-c61e1629.js”的加载失败。
我已经为单页面应用程序设置了Firebase重写规则：
"site": "examplewebsite.com",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
并且我的dist文件夹的结构如下：
尝试刷新或直接导航到页面。预期Firebase会重写到index.html，React Router会从那里处理并加载正确的组件。但实际上出现了MIME类型错误和空白页面。也没有出现预期的404页面加载。
英文:
Using react router and Firebase hosting to run a website, when refreshing or navigating to a specific path I get a Mime type error.
Example: I can navigate to website.com/projects just fine
When entering website.com/projects/ or website.com/projects/project1 etc. I get the error.
This only happens when hosting, not when running locally.
When using the build in navigation buttons (ie. I navigate to website.com/projects to website.com/projects/project1 by clicking a button on projects) it works as expected. However, if I refresh it breaks again.
Error is:
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.
Firefox gives a little more detail:
The stylesheet https://website.com/projects/assets/index-8ea4127f.css was not loaded because its MIME type, “text/html”, is not “text/css”.
Loading module from “https://website.com/projects/assets/index-c61e1629.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://website.com/projects/assets/index-c61e1629.js”.
I have firebase rewrites setup for a single page application:
"site": "examplewebsite.com",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
And have the structure of my dist folder as so:
Attempted to refresh or navigate directly to a page. Expected firebase to rewrite to index.html and react router to handle it from there and load the correct components. Instead got mime type error and blank page. Also did not result in secondary expected result of 404 page loading.
答案1
得分: 0
将我的vite.config.js更新为以下内容以解决问题：
export default defineConfig({
plugins: [react()],
build: {
outDir: "dist", // 告诉vite将构建输出到名为docs的文件夹
},
base: "/" // 告诉vite从根域名请求依赖项
})
英文:
Fixed the issue by updating my vite.config.js from:
export default defineConfig({
plugins: [react()],
build: {
outDir: "dist" // tells vite to output the build to a folder called docs
},
base: './' // tells vite to request dependencies relative to the path the app is hosted on, not the root domain
})
to
export default defineConfig({
plugins: [react()],
build: {
outDir: "dist" // tells vite to output the build to a folder called docs
},
base: '/' // tells vite to request dependencies from the root domain
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论