运行create-react-app构建后出现空白页面

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

- Verthon

Answer 1

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

"homepage": "."

根据这个文档，在package.json中进行设置。

- Verthon

---

即使将“.”添加为主页，我仍然得到一个空白页面。有没有其他可能出错的线索？ - mvinayakam

好的，以下是我的答案，请查看这里。 - Zach Olivare

在我的情况下，解决方法是在加载 Google API 脚本时添加 onload 参数，就像谷歌 API 客户端文档中提到的那样，在这里。 - Charney Kaye

它解决了我的问题，但如果我给我的主页设置一个值为“。”，我该如何在GitHub上托管我的应用程序？ - user14101590

我在package.json中添加了"homepage": "."后仍然遇到了相同的问题。我将BrowserRouter改为HashRouter，现在问题解决了。 - undefined

Answer 2

如果你正在使用 react-router 并试图直接在浏览器中打开 index.html（或者使用 electron，本质上就是这样做），除了像其他人建议的设置 homepage 之外，还需要将你的 BrowserRouter 替换为 HashRouter。

---

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

我发现这与直接在浏览器中打开 index.html 文件的情况完全相同。所有人都说“在 package.json 中设置 homepage”，但我已经设置了。那么现在怎么办？

最终我发现问题出在 react-router 上。我正在使用 BrowserRouter。将其更换为 HashRouter 对我解决了问题。

- Zach Olivare

---

兄弟，他也救了我的命。你有没有想过为什么 HashRouter 起作用？ - vexingCoder

HashRouter 能够工作是因为 URL 中 "#" 后面的内容不会被发送给 "服务器"，这部分内容只会被 react-router 解释。 - Zach Olivare

HashRouter 在 react-router-dom 中完美运作。 - Saurabh Kiri

谢谢你拯救生命，伙计。 我们有详细说明这个的文档吗？ - Abhishek Saini

这证明了并非所有英雄都穿斗篷。如果有人对HashRouter想要了解更多细节，请查看https://dev59.com/llQK5IYBdhLWcg3wXeyN#51976069。 - Jakov Gl.

Answer 3

添加

"homepage": ".",

在你的package.json文件中做出修改，然后再次构建。

- Umair Sultan

Answer 4

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

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

- adir abargil

---

您救了我，谢谢您！不知道为什么这个问题没有在文档中被记录下来，除非是我漏看了？ - twknab

Answer 5

我刚刚发现自己一次又一次地犯了同样的错误：把public文件夹发布了出去，而不是build文件夹。

- Oystein

---

我讨厌这是我的错误。我想知道是否有一个教程，可以为我们都遵循的构建文件夹指令提供“例如：public”的说明。 - Dustin English

可能确实是这样。但在我的情况下，那只是一时的大脑活动失误... :-) - Oystein

天啊！我两个小时前怎么跳过了这个建议。 - Patrik Rikama-Hinnenberg

Answer 6

如果它在根目录中，您可以使用homepage。

  "homepage":"."

在package.json中

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

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

- Mostafa Matar

Answer 7

我在return方法中有一个注释，这导致了问题。

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

Minified React error #152;

那么删除return方法中的任何注释可能会解决你的问题，就像我的问题一样。

- Uche Azinge

Answer 8

我解决了。这个问题发生在我部署到GitHub页面后。

本地运行正常，但是部署后打开的是空白页面。

问题出在我们更改了主页路径。因此，我们需要更新代码中的路径。

以我的情况为例，我在“package.json”文件中添加了主页：

"homepage": "https://[YourGitHubAccountName].github.io/[YourProjectName]"

所以在添加这个之后，应用程序不起作用，因为我的代码中的路径需要更改。

例如：

'/' 路径应该变成 '/[YourProjectName]' 或

'/test' 应该变成 '/[YourProjectName]/test'

- RecepU

Answer 9

对我而言，问题在于内联运行时脚本未被执行，我一直收到以下错误信息：

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",

这是由于浏览器的内容安全策略：“一个CSP兼容的浏览器只会执行从那些被允许列入白名单的域接收到的源文件中加载的脚本，忽略所有其他脚本（包括内联脚本和事件处理HTML属性）。”

- kuzdogan

Answer 10

当我尝试映射未定义的属性时，我的屏幕变成了黑色。

importing_file.js

<MediaImage  />

imported_file.js

export const MediaImage = props => {
    console.log("areas", props.areas)
    return (

        <div className={props.className} id={props.id}>

        <img src="../../favicon-flat.png" alt="Workplace" useMap={"#mapa"+props.id}/>

        <map name={'element'props.id}>
 {props.areas.map(m=>{} )}

        </map>

        </div>)

}**

- Bujaq