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

Question

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

即使我尝试在我的计算机上本地打开它，它的空白页面也会在控制台中输出错误："Loading failed for the with source “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

我通过设置解决了问题

"homepage": "."

在 package.json 根据 this doc

Answer 2

添加

"homepage": ".",

在您的 package.json 中然后重新构建。

Answer 3

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

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

这是解决方案：只需将其添加到您的 index.js 文件中并删除 service worker 注册

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

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

Answer 7

我试图在使用 double-clicking 和 index.html 构建后打开应用程序，但也没有用，我得到的是空白页面，但如果构建的文件是运行服务器环境有效。 https://create-react-app.dev/docs/deployment/

Answer 8

糟糕，因为我刚刚发现我已经做了一遍又一遍：您发布了 public 文件夹而不是 build文件夹。

Answer 9

我的 return 方法中有一条评论，这导致了我的问题。

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

Minified React error #152;

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

Answer 10

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

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-5='), or a nonce ('nonce-...') is required to enable inline execution.

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

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

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

Answer 11

我遇到了类似的问题。但是如果你按照React-Deployment，正确的话，你会发现有一个“主页”：“。” // 用户“.”如果您在本地机器上部署，但在某处托管的服务器上，您可以在主页字段中使用您的域或 IP 地址。

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

Answer 12

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

Answer 13

我遇到了同样的问题，那是因为我错误地导入了 useContext

Answer 14

如果它在根文件夹中，您可以使用 homepage

  "homepage":"."

在package.json

如果它位于 https://example.com/admin 等任何其他文件夹中，您可以使用

  "homepage":"https://example.com/admin"

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

Blank page after running build on create-react-app

reactjs

netlify

create-react-app

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

Blank page after running build on create-react-app

reactjs

netlify

create-react-app

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