Create React App 生产构建成功，但生成的代码有错误

Posted 2023-02-22

【中文标题】Create React App 生产构建成功，但生成的代码有错误

【英文标题】：Create React App production build succeeds but produces code with errors

【发布时间】：2019-04-17 17:10:09

【问题描述】：

我有一个我一直在使用 webpack-dev-server 开发的 create-react-app React 应用程序，并且在开发中一切正常。

但是，当我为生产构建时，输出构建不起作用并出现以下控制台错误：

Uncaught SyntaxError: Unexpected token < :4001/static/js/1.33f1f515.chunk.js/:1
Uncaught SyntaxError: Unexpected token < :4001/static/js/main.625fef55.chunk.js/:1
Uncaught SyntaxError: Unexpected token < manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

【问题讨论】：

从 CRA 1.0 升级到 CRA 2.0 后，我也遇到此错误 Uncaught SyntaxError: Unexpected token < manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

这个问题有什么解决办法吗？

您是从/ 还是相对路径/子目录提供应用程序？如果是子目录，您可以预先添加 process.env.PUBLIC_URL 以引用图像文件和 Link 如果您使用的是 React Router。

从package.json 中删除homepage，应该这样做

【参考方案1】：

您是否在生产环境中使用 express (nodejs) 服务器？

如果是，则检查静态文件服务配置。问题是/manifest.json、/static/js/main.625fef55.chunk.js/ 等返回 index.html 而不是 manifest 或 js 文件。

这是我的示例服务器文件-

const express = require('express');
const path = require('path');
const app = express();

app.use('/', express.static(path.join(__dirname, '../build')));

app.use(function(req, res, next) 
  //console.log(req.originalUrl);
  next();
);

// to check if server is running
app.get('/ping', (req, res) => 
  res.json(
    success: true,
    message: 'pong'
  )
);

app.get('/*', function(req, res) 
  res.sendFile(path.join(__dirname, '../build', 'index.html'));
);

module.exports = app;