Question

尝试在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

Answer 1

如果您正在使用react-router并尝试直接在浏览器中打开index.html（或使用电子，实际上是这样做的话），除了其他建议设置homepage ，将您的BrowserRouter替换为HashRouter。

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

我发现这与直接在浏览器中打开index.html文件完全相同。每个人都说“在homepage中设置package.json，但是我已经知道了。那怎么办！？

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

Answer 2

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

Answer 3

就像Verthon所说的那样，将"homepage": ".",放在package.json文件的顶层中，如下所示：

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

Answer 4

我通过将首页设置为“”解决了该问题。根据这份文件https://facebook.github.io/create-react-app/docs/deployment

Answer 5

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

Answer 6

我刚刚发现我一次又一次地做了：您发布了 public 文件夹而不是 build 文件夹。

Answer 7

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

如果浏览器控制台中的错误消息是“Minified React error #152;”

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

Answer 8

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

<块引用>

拒绝执行内联脚本，因为它违反了以下内容内容安全策略指令：“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 属性） )”

Answer 9

所以问题出在浏览器中缓存应用程序。

我已经通过Create-react-app中的serviceWorker（）解决了这个问题。

这是解决方法：->

只需将其添加到index.js文件中，然后删除服务人员注册

从'./registerServiceWorker'导入{取消注册};

取消注册（）;

Answer 10

运行iA
在config文件夹中编辑文件webpack.config
找到文件中带有“ static /”或“ static / js /”或“ static / css /”的路径，并删除该路径
重新构建项目

为我工作。希望这也对您有用。

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

10 个答案: