生产时 Express-React 应用程序出现空白屏幕:未捕获的语法错误:意外的标记 < | index.html doesn't serve other files

问题描述 投票:0回答:2

我的应用程序在使用代理的开发环境中运行良好。当我推送到heroku(生产)后,我看到一个空白屏幕。在 Chrome 开发者工具中,我看到以下两个错误:

Unexpected token.         manifest.json:1
Uncaught SyntaxError: Unexpected token <     main.bac17543.js:1

当我点击这两个错误时,我看到清单文件、main.css 文件和 main.css 文件都以 HTML 文件作为源。无法从 client/build/index.html 加载其他文件。

好吧,所以尝试一下,我发现当我运行“npm run dev”时,它在客户端端口上运行得很好。但是,当应用程序在服务器端口上启动并使用课程中显示的以下快速代码提供 index.html 文件时,会出现错误:

if (process.env.NODE_ENV === 'production') {
    //Express will serve up production assets like main.js file
    app.use(express.static('/client/build'));
    //Express will serve up html file if it doesn't recognize the route
    const path = require('path');
    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
    });
}

此代码成功提供了 html 文件。但其中链接的所有其他文件都会失败。

多次重新加载到 Heroku 后,我通过取出生产 if 语句并导航到 localhost:5000 (服务器端口)重现了该错误。从客户端文件夹运行“npm run build”后,运行“npm run dev”时收到相同的错误。即使我在“npm run build”之前将“build”切换为“public”以运行index.html,我也会收到相同的错误。为了测试html文件是否被调用,我写了

<h3>testing html</h3>
,并且HTML成功地作为唯一的内容渲染到屏幕上。但似乎没有找到manifest、favicon、css文件和javascript文件,返回原始index.html文件并在文件开头抛出错误:“<."

这是我的build文件夹下的index.html文件:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>Compass</title><link href="./static/css/main.c092d6b6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/main.bac17543.js"></script></body></html> 

它位于公共文件夹中:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <h3>this HTML is called, but the javascript file fails when served from Express</h3>
    <div id="root"></div>
  </body>
</html>

我已经在两个文件夹的 href 和 src 属性中尝试了绝对路径和相对路径。但仍然没有骰子。我非常有信心这些路径是正确的,因为它们可以正常工作,但由于某种原因它无法正确读取。构建路径为 server/build/index.html、sever/build/static/css/main.d3f5fbbb.css 和 server/build/static/js/main.69f468ec.js。

也许存在一些配置问题?我还没有接触过 webpack 或其他任何东西的配置。我只是不确定为什么在从 Express 提供服务时,责任会落在 HTML 文件上。可以请指教吗?

reactjs express server production-environment create-react-app
2个回答
2
投票

我也遇到了同样的问题。我能够通过在我的react

package.json
中设置我的主页来解决这个问题,从自动填充到heroku url的github页面,因为这是提供静态文件的。

发现此信息很有帮助,并引导我检查我的

package.json

中的主页属性

https://github.com/facebook/create-react-app/issues/527

希望这对尝试从一个存储库部署 Express 并做出反应到 Heroku 的其他人有所帮助。


-1
投票

尝试在 IIS 上托管 React 应用程序时遇到同样的问题。有人有其他解决方案吗?上述解决方案不起作用。

© www.soinside.com 2019 - 2024. All rights reserved.