Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

Question

我知道这个问题已经被问过很多次了，但对我没有任何帮助...

我正在尝试创建 create-react-app 项目的静态构建，但出现以下错误：

Uncaught SyntaxError: Unexpected token <     1.ca81c833.chunk.js:1
Uncaught SyntaxError: Unexpected token <     main.7ced8661.chunk.js:1

由于这些文件被缩小了，我不确定从哪里开始调试它们。

根据其他 SO 回复，以下是我尝试过的一些方法：

//Original index.html file, which gets included in the built file:
<script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

//package.json
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

//.babelrc file
{
  "presets": ["react", "es2015", "stage-1"]
}

不确定这是否相关，但我的快递服务器上有这个，我认为这是标准的：

if (process.env.NODE_ENV === "production") {

    app.use(express.static('client/built'));
    app.get("*", (req, res) => {
        res.sendFile(require('path')
            .resolve(__dirname, 'client', 'build', 'index.html'));
    })
}

假设这实际上是一个 JSX 问题，整个事情非常混乱 - create-react-app 不应该自动处理 JSX 吗？

更新：我刚刚发布了这个问题，但已经有了相关的更新。我可以通过运行 pm2 serve build 通过 pm2 静态地提供页面，所以我认为问题可能出在我的服务器配置上。

Answer 1

我最终在这里找到了答案：https://github.com/facebook/create-react-app/issues/1812

我从上面删减了完整的解决方案，但我改变了：

app.use(express.static('client/build'));
app.get("*", (req, res) => {
    res.sendFile(require('path')
        .resolve(__dirname, 'client', 'build', 'index.html'));
})

至：

const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
    res.sendFile('index.html', { root });
})

第一个block不工作对我来说肯定有点奇怪。我认为它与我的 React 项目中的相关链接有关，因为尽管收到错误，但我确实将 index.html 文件传送到了浏览器。也许完全静态的文件适用于第一个块，但我很想知道这是否准确。

Answer 2

谢谢，这对我帮助很大。只是想添加一个来自具有相同解决方案的 Create-React-App 项目的示例：我在部署到 heroku 后收到了同样的错误。

Uncaught SyntaxError: Unexpected token < after serve -s build

对我来说，问题出在 packages.json 文件中。我给的 "homepage" 参数不正确。将其更改为正确的 heroku URL 解决了问题。

"homepage": "https://myapp.herokuapp.com/"

希望这一补充对您有所帮助。

Answer 3

我使用 "npm run build" 创建了 React 应用程序的构建版本。我有一台服务器 (node/express)。我想在服务器端包含构建并部署到 heroku。我所做的是将构建文件夹复制到服务器根文件夹并在服务器端启动文件中使用代码：

app.get('/*', function (req, res, next) {
    if (!req.path.includes('api'))
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    else next();
});

我遇到了同样的错误。所以我只是在开始时设置静态内容的路径：

var app = express();
//here below
app.use(express.static(path.join(__dirname, 'build')));

我的静态 index.html 运行良好，能够找到资源 css 和 js。

Answer 4

只需删除

"homepage": "your app url "

从 package.json 开始修复它

Answer 5

如果您将客户端部署到 S3，则在使用 react-deploy-s3 部署时，从 CloudFront 分配分发 ID

react-deploy-s3 deploy \
  --access-key-id XXXXXXXXXXXXXXXXX \
  --secret-access-key XXXXXXXXXXXXXXXXXXXXXXXX \
  --bucket XXXXXXX \
  --region us-east-1 \
  --distribution-id XXXXXXXXXXXXX                        <---

Answer 6

更新：

最近我需要将 create-react-app 项目部署到客户域的子路径，即 http://example.com/foo/bar

此方法使用 Nginx、React-Router。

将 PUBLIC_URL 添加到 .env 文件。

    + PUBLIC_URL=/foo/bar

将 basename 添加到 <BrowserRouter>。

    - <BrowserRouter>
    + <BrowserRouter basename={process.env.PUBLIC_URL}>

更改您的 Nginx 配置。

    location /foo/bar {
        alias /path/to/build;
        try_files $uri /$uri /foo/bar/index.html;
    }

这里有一份 create-react-app 文档，介绍如何使用 .env 进行构建： Customizing Environment

希望此解决方案有所帮助！

当我想将 create-react-app 项目的静态构建部署到我的 linux 服务器时，

运行遇到了同样的问题。

我用 this issue comment on cra's github and the cra's official document about how to deploy production build 解决了。

例如：

我想将生产构建网站放在 http://example.com/foo/bar.

之类的目录下

当我在不更改任何默认设置的情况下进行部署时，我会收到此“未捕获的语法错误：意外的令牌 <”错误，并且屏幕上没有显示任何内容。

解决方法如下：

将主页参数添加到您的 package.json。

    + "homepage": "/foo/bar"

将“/foo/bar”添加到 css 中的所有静态资源，如下所示：

    .dummyimage {
     - content: url('/dummyimage.jpg');
     + content: url('/foo/bar/dummyimage.jpg');
    }

将“/foo/bar”添加到您的所有链接和路线。

    - linkTo: '/contact'
    + linkTo: '/foo/bar/contact'

在节点中更改一点服务程序的代码。js/express它将像：

    - app.use(express.static(path.join(__dirname, '/build')));
    + app.use('/foo/bar/', express.static(path.join(__dirname, '/build')));

再次构建。
将构建/部署到服务器。
重启你的服务程序，比如node.js/express.

问题已解决！！

希望这个解决方案对您有所帮助。

Answer 7

当我想将我的 React 应用程序部署到 github 页时，我遇到了同样的问题：- 它需要遵循一些准则

仓库名应该是小写
如果项目名称与有用的 repo 名称相同
添加{ “预部署”：“npm 运行构建”， “部署”：“gh-pages -d 构建” } 在 package.json
在package.json
开头添加主页脚本
{ "主页": "http://[用户名].github.io/[reponame]", “姓名”： ” - ”， “版本”： ” - ”， “私人”：布尔值， }

Answer 8

从 package.json 中删除 "homepage": "app-url"。 package.json 中缺少 homepage 将假定它将托管在服务器根目录，或者您将使用 serve -s build.

提供构建服务

是的，当您要在服务器根目录的 sub-directory 中部署应用程序时，指定 homepage 会很有帮助。

要在 IIS 上使用名称 somedomain.net 托管您的应用程序，并且您的解决方案已经有一个 Web API 项目。

您将解决方案文件夹映射到主 Web 应用程序，即 somedomain.net
您将从 IIS 将 Web API 项目转换为应用程序。
那你就把React App的build文件夹转成web App就和Web一样API
要使 front-end 应用正常运行，请指定 "homepage": "somedomain.net/React-Project/Client-App/build"

Answer 9

我在将 React 构建部署到生产环境时遇到了同样的问题。在花了几个小时试图找出以前工作的代码出了什么问题之后，我发现了我在部署中犯的一个错误。

我没有将 build 中的文件夹 static 复制到服务器，因为我使用 scp build/* 复制了构建文件夹而不是 scp -r build/*。

我知道这不是对此处提出的问题的准确答案。但是在我注意到我犯的错误之前，我已经尝试了这里专家给出的答案中几乎所有可能的选项。因此，将其添加到此处作为指向面临类似问题的任何人的指针，以验证部署步骤。

Answer 10

只需删除 package.json 中的 homepage 键，如果您使用的是 React 路由器，也不要忘记删除 BrowserRouter 中的 basename。

就是这样。有效

Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

Create-React-App build - "Uncaught SyntaxError: Unexpected token <"

jsx

reactjs

webpack

create-react-app

更新：