logo标签列表

运行create-react-app构建后出现空白页面

reactjscreate-react-appnetlify
80
尝试在netlify上部署create-react-app，但我的构建页面是空白的。 我正在使用.env文件加载firebase api密钥，这对构建有影响吗？
即使我尝试在本地计算机上打开它，也是一个空白页面，并在控制台输出错误：“加载失败，源为“file：/// event-app / static / js / main.108757a0.js”” package.json： https://gist.github.com/Verthon/f82371ad2bb636b2e95c5b7697aa0bb5 
➜  event-app git:(master) ✗ npm run build

> event-app@0.1.0 build /home/jurr/Projects/event-app
> node scripts/build.js

Creating an optimized production build...
Compiled with warnings.

./src/components/Router.js
  Line 12:  'withFirebase' is defined but never used  no-unused-vars

./src/components/Firebase.js
  Line 21:  'Firebase' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  282.86 KB  build/static/js/main.108757a0.js
  3.1 KB     build/static/css/main.8e671453.css
18个回答
0
我曾经遇到过同样的问题，原因是我错误地导入了useContext。
目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community
0

我遇到了类似的问题。但是如果你按照React-Deployment正确地操作，你会发现有一个"homepage":"."的字段。如果你在本地机器上部署，就使用"."，但如果在托管在服务器上，你可以使用你的域名或IP地址填写homepage字段。

{
  "homepage":"https://example.com"
}

0

React与typescript的工作解决方案是在package.json中添加"homepage": "."

  {
  "name": "todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  },
  "scripts": {    
  },
  "eslintConfig": {    
  },
  "browserslist": {
  },
  "homepage": "."
}

现在使用npm run build构建应用程序，并打开生成的html文件。

0
我使用了react-router-dom进行安装。
npm i react-router-dom

我关闭了我的VPN。 现在它可以正常工作了。
-1

只需将 package.json 中的私有属性值更改为 false 即可。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
那对我没用，而且似乎很危险。 - VibrationPositive
-2
所以问题在于应用程序在浏览器中的缓存。
我使用 create-react-app 中的 serviceWorker() 解决了这个问题。
以下是解决方案：只需在您的 index.js 文件中添加此内容并删除服务工作器注册。
import { unregister } from './registerServiceWorker';
unregister();
-3

我试图通过双击index.html打开构建后的应用程序，但也无法工作，我得到了一个空白页面，但如果在服务器环境中运行构建文件，则可以正常工作。https://create-react-app.dev/docs/deployment/

-6

  1. 运行 npm run eject

  2. 编辑 config 文件夹中的 webpack.config 文件

  3. 在文件中查找包含 "static/"、"static/js/" 或 "static/css/" 的路径，并删除这些路径

  4. 重新构建项目

这对我有用，希望对你也有用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接