部署生产构建时 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

我最近在 React 应用程序中使用 react-particles-js 时遇到了同样的问题，得到

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

在控制台上。

碰巧我正在处理一个带有过时软件包版本的旧项目，因此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

Answer 2

当我在 Chrome 上转到 www.cotswoldcohost.co.uk 时，我的控制台给了我 Uncaught TypeError: Super expression must either be null or a function。

如果这是真正的潜在问题而不是 Particle.js 问题，那么它可能是您应用中的导出问题。我会检查这些东西：

1. 循环依赖/导入
2. 错误地导入默认导出（通常是带有不应使用大括号的大括号的导入）
3. 缺少import 声明

Answer 3

刚刚浏览了整个项目并删除了所有对particles.js 的引用，因为它并不重要……而且它可以正常工作。那是漫长的一天，但我学到了很多。感谢大家的意见。