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

【问题标题】：Blank page after running build on create-react-app在 create-react-app 上运行构建后的空白页面
【发布时间】：2019-08-29 07:46:03
【问题描述】：

尝试在 netlify 上部署 create-react-app，但是我的构建是空白页。我正在使用 .env 文件来加载 firebase api 密钥是构建的问题吗？

即使我尝试在我的计算机上本地打开它，它的空白页面也会在控制台中输出错误：“加载失败的源文件”文件：///event-app/static/js/main.108757a0。 js”"

包.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

【问题讨论】：

标签： reactjs create-react-app netlify

【解决方案1】：

我通过设置解决了问题

"homepage": "."

在package.json根据@987654321@

【讨论】：

即使添加了“.”，我仍然得到一个空白页。作为主页。关于还有什么可能出错的任何线索
是的，请参阅下面的my answer。
在我的情况下，解决方案是将 onload 参数添加到加载 google api 脚本中，如 google api client docs 中提到的 here
它解决了我的问题，但是如果我给我的主页一个像“。”这样的值，我怎么能在 github 上托管我的应用程序。 ?

【解决方案2】：

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

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

我发现这和直接在浏览器中打开index.html文件完全一样。每个人都说“在package.json 中设置homepage”，但我已经有了。那么现在呢！？

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

【讨论】：

该死，这救了我的命
老兄，也救了我的命。你知道为什么 HashRouter 有效吗？
HashRouter 有效，因为 URL 中的“#”之后没有任何内容被发送到“服务器”。 URL 的那部分仅由 react-router 解释。
这是非常有效的解决方案。谢谢。
感谢您的回答。这是工作，但在我尝试点击另一个页面后无法重定向。

【解决方案3】：

添加

"homepage": ".",

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

【讨论】：

【解决方案4】：

正如@Verthon 所说，将"homepage": ".", 放在您的package.json 文件中，在顶级中，如下所示：

{
     "name": "myApp",
     "homepage": ".",
     // all other package.json stuff...
}

【讨论】：

您救了我，谢谢先生！想知道为什么除非我忽略了，否则为什么没有在某个地方的文档中捕获这一点？

【解决方案5】：

糟糕，我刚刚发现自己做了一次又一次：您发布了 public 文件夹而不是 build 文件夹。

【讨论】：

我讨厌这是我的错误。我想知道我们都遵循的构建文件夹说明是否有一个教程说“例如：公共”。
很可能是这样。但就我而言，这只是大脑活动的短暂中断...... :-)

【解决方案6】：

对我来说，问题是内联运行时脚本没有运行，因为我收到了错误：

拒绝执行内联脚本，因为它违反了以下内容内容安全策略指令：“script-src 'self'”。无论是 'unsafe-inline' 关键字、哈希 ('sha256-5=') 或随机数 ('nonce-...') 是启用内联执行所必需的。

已通过将 INLINE_RUNTIME_CHUNK=false 变量添加到构建脚本来解决此问题。

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",

这是因为浏览器的Content Security Policy：“然后，与 CSP 兼容的浏览器将只执行从那些列入许可的域接收的源文件中加载的脚本，而忽略所有其他脚本（包括内联脚本和事件处理 HTML 属性）。 "

【讨论】：

【解决方案7】：

我遇到了类似的问题。但是如果你正确地关注React-Deployment，你会意识到有一个“主页”：“。” // 用户 "."如果您在本地计算机上部署，但在托管在某处的服务器上，您可以使用您的域或 IP 地址作为主页字段。

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

【讨论】：

【解决方案8】：

我的 return 方法中有一条评论，这给我带来了问题。

如果浏览器控制台中的错误信息是

缩小反应错误 #152;

然后删除 return 方法中的任何评论可能会解决您的问题，就像我的问题一样。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

所以问题在于您的应用在浏览器中的缓存。

我已经用create-react-app 中的serviceWorker() 解决了这个问题。

这是解决方案：只需将其添加到您的 index.js 文件中并删除服务工作者注册

import { unregister } from './registerServiceWorker';
unregister();

【讨论】：

【解决方案11】：

运行npm run eject
编辑config文件夹中的webpack.config文件
在文件中找到带有“static/”或“static/js/”或“static/css/”的路径并删除该路径
再次构建您的项目

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

【讨论】：