在 create-react-app 上运行构建后的空白页面

IT技术 reactjs create-react-app netlify
2021-03-28 06:59:24

尝试在 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
6个回答

我通过设置解决了这个问题

"homepage": "."

在package.json根据这个文档

它解决了我的问题，但是如果我给我的主页一个像“.”这样的值，我怎么能在 github 上托管我的应用程序。?
2021-06-04 06:59:24
在我的情况下，分辨率是添加onload参数去加载谷歌API的脚本，如谷歌的API客户端文档提到这里
2021-06-08 06:59:24
是的，请看下面我的回答。
2021-06-10 06:59:24
即使在添加“.”之后，我仍然得到一个空白页。作为主页。关于还有什么可能是错误的任何线索
2021-06-19 06:59:24

如果您正在使用react-router并尝试index.html直接在浏览器中打开（或使用电子，本质上是这样做的），除了homepage按照其他人的建议进行设置外，请将您的替换BrowserRouter为HashRouter.

我试图使用 create-react-app 构建一个电子应用程序。在开发中运行时一切正常，但是当我构建 CRA 然后将电子应用程序指向index.html文件时，我得到了空白页。

我发现这和index.html直接在浏览器中打开文件完全一样。大家都说“设置homepage在package.json”，但我已经有了这一点。所以现在怎么办！？

我最终发现问题是react-router. 我正在使用一个BrowserRouter. 切换到一个HashRouter解决了我的问题。

伙计，也救了我的命。你知道为什么 HashRouter 有效吗？
2021-06-01 06:59:24
这是非常有效的解决方案。谢谢。
2021-06-05 06:59:24
该死，这救了我的命
2021-06-07 06:59:24
感谢您的回答。这是可行的，但在我尝试单击到另一个页面后无法重定向。
2021-06-08 06:59:24
HashRouter有效，因为 URL 中的“#”之后没有任何内容被发送到“服务器”。URL 的那部分仅由 react-router 解释。
2021-06-11 06:59:24

添加

"homepage": ".",

在您package.json然后再次构建。

正如@Verthon所说，将 放在"homepage": ".",你的 package.json 文件中，像这样在顶层：

{
     "name": "myApp",
     "homepage": ".",
     // all other package.json stuff...
}
你救了我在这里谢谢你先生！想知道为什么这没有被记录在某个地方的文档中，除非我忽略了？
2021-06-05 06:59:24

Oooor，因为我刚刚发现我一次又一次地这样做：您发布了公共文件夹而不是构建文件夹。

在此处输入图片说明

那很可能是。但就我而言，这只是大脑活动的短暂中断...... :-)
2021-06-07 06:59:24
我讨厌这是我的错误。我想知道是否有一个教程说“例如：公共”用于我们都遵循的构建文件夹说明。
2021-06-09 06:59:24
其它你可能感兴趣的问题
上一篇生产/构建中的 Material-UI 渲染错误 下一篇Enzyme 模拟一个 onChange 事件