Reactjs 运行create react应用程序上的构建后出现空白页

正在尝试在netlify上部署create react应用程序，但我的构建是空白页。我正在使用.env文件加载firebase api密钥，这对构建来说是个问题吗

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

package.json：

➜ 事件应用程序git:master✗ npm运行构建 >事件-app@0.1.0build/home/jurr/Projects/event应用程序 >节点脚本/build.js 正在创建优化的生产构建。。。 用警告编译。 ./src/components/Router.js 第12行：“withFirebase”已定义但从未使用过没有未使用的变量 ./src/components/Firebase.js 第21行：“Firebase”已定义但从未使用过没有未使用的变量 搜索关键字以了解有关每个警告的更多信息。 若要忽略，请将//eslint disable next行添加到前面的行。 gzip后的文件大小： 282.86 KB build/static/js/main.108757a0.js 3.1kb build/static/css/main.8e671453.css

---

我已通过设置主页解决了此问题：。根据此文档

在您的package.json中添加homepage:，然后重新构建。

因此问题在于浏览器中的应用缓存

我已在CreateReact应用程序中使用serviceWorker解决了此问题

以下是解决方案：->

只需将其添加到index.js文件中并删除服务工作者注册

从“./registerServiceWorker”导入{unregister}

注销

运行npm运行弹出

在config文件夹中编辑文件webpack.config

在文件中查找带有static/或static/js/或static/css/的路径并删除该路径

重新构建项目

---

这是我的工作。希望这也能对您起作用。

正如Verthon所说，将主页：，放在package.json文件的顶层，如下所示：

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

如果您使用react router并试图在浏览器中直接打开index.html，或者使用electron（实际上就是这样做的），除了按照其他人的建议设置主页外，还可以使用HashRouter替换BrowserRouter

我正在尝试使用CreateReact应用程序构建一个电子应用程序。在运行中开发时，一切都很好，但是当我构建CRA，然后把电子app指向索引文件.html文件时，我得到了空白页。 我发现这与直接在浏览器中打开index.html文件完全相同。每个人都说在package.json中设置主页，但我已经有了。那现在怎么办

---

我最终发现问题出在路由器上。我用的是浏览器路由器。切换到一个HASH路由器解决了我的问题。

< P>我试图在打开双击索引文件后打开应用程序，并且没有工作，我得到了一个空白页面，但是如果在一个服务器环境中运行的文件是工作的。p> oor当我刚刚发现我已经做了一次又一次：你发布了公共文件夹而不是构建文件夹

---

我在返回方法中有一条评论，这给我造成了问题

如果浏览器控制台中的错误消息被缩小，则响应错误152

---

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

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

拒绝执行内联脚本，因为它违反以下条件 内容安全策略指令：脚本src'self'。要么 “不安全内联”关键字、哈希“sha256-5=”或nonce 启用内联执行需要“nonce-…”

通过将INLINE_RUNTIME_CHUNK=false变量添加到构建脚本中，修复了此问题

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

---

这是因为浏览器的复杂性：与CSP兼容的浏览器将只执行从这些allowlisted域接收的源文件中加载的脚本，而忽略所有其他脚本，包括内联脚本和事件处理HTML属性。

即使在添加后，我也会得到一个空白页。作为主页。任何关于其他错误的线索是的，请参见下文。在我的案例中，解决方案是将onload param添加到加载的google api脚本中，就像前面提到的该死的，这救了我的命，也救了我的命。你知道HashRouter为什么工作吗？HashRouter工作是因为URL中的内容发送到服务器后没有任何内容。URL的这一部分仅由react-router解释。这是非常有效的解决方案。谢谢。谢谢您的回答。这是工作，但在我尝试点击另一个页面后无法重定向。我讨厌这是我的错误。我想知道是否有一个教程说，例如：我们都遵循的PublicforBuildFolder说明。很可能是这样的。但在我的情况下，这只是大脑活动的一个短暂的失误…：-