部署生產構建時 React App 空白頁面

Question

我是新來的反應，所以如果這是基本的道歉 - 但是按照一個有希望的學習曲線來構建網站，我花了 c9hrs 試圖讓它部署:(

信息如下...

1.在我的機器上作為開發版本運行良好。

2.通過'npm run build'創建一個生產版本會導致它在假設它托管在服務器根目錄的情況下被構建 - 見下文；

file sizes after gzip:

  278.93 KB  build/static/js/2.a3ca1e82.chunk.js
  42.16 KB   build/static/js/main.1a0b5ce7.chunk.js
  33.88 KB   build/static/css/main.75362cf6.chunk.css
  24.72 KB   build/static/css/2.3cd6815b.chunk.css
  762 B      build/static/js/runtime~main.a8a9905a.js

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

運行 'serve -s build' 會導致在 localhost:5000 上本地部署生產版本 - 但出現黑屏問題

...並且問題在 Amazon S3 上的生產部署中是一致的。 現在可以在www.cotswoldcohost.co.uk上看到這一點。

查看源代碼，它似乎正在查找 index.html，並且控制台突出顯示了particle.js 的類型錯誤——這可能是與渲染問題不同的問題。

任何建議都非常感謝 - 很高興提供您可能需要的更多信息！

Answer 1

當我在 Chrome 上通過 go 訪問www.cotswoldcohost.co.uk時，我的控制台給了我Uncaught TypeError: Super expression must either be null or a function .

如果這是真正的潛在問題而不是 Particle.js 問題，那么它可能是您的應用程序中的導出問題。 我會檢查這些東西：

1. 循環依賴/導入
2. 錯誤地導入默認導出（通常是帶有不應使用大括號的大括號的導入）
3. 缺少import語句

Answer 2

剛剛瀏覽了整個項目並刪除了對particles.js 的所有引用，因為它並不重要......並且它的工作原理。 那是漫長的一天，但我學到了很多。 感謝大家的意見。

Answer 3

我最近在 React 應用程序中使用react-particles-js時遇到了同樣的問題，得到

TypeError: Super expression must either be null or a function, not object

在控制台上。

碰巧我正在使用過時的 package 版本進行舊項目，因此react ， react-scripts和react-particles-js之間存在不兼容。 將軟件包更新到以下版本解決了我的問題：

 react: ^17.0.2, react-dom: ^17.0.2, react-particles-js: ^2.7.1, react-scripts: 3.4.4, eslint: ^6.6.0