Create-React-App build - “Uncaught SyntaxError: Unexpected token <”

新手上路,请多包涵

我意识到这个问题已被多次问过,但对我没有任何帮助……

我正在尝试创建 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 静态地提供页面,所以我认为问题可能出在我的服务器配置上。

原文由 SuperCodeBrah 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k
2 个回答

我最终在这里找到了答案: 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 });
})

第一个块不起作用对我来说绝对有点奇怪。我认为这与我的 React 项目中的相关链接有关,因为我确实收到了一个 index.html 文件,尽管出现了错误。也许一个完全静态的文件可以与第一个块一起使用,但我很想知道这是否准确。

原文由 SuperCodeBrah 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

Uncaught SyntaxError: 意外的令牌 < 在 serve -s build 之后

对我来说,问题出在 packages.json 文件中。我给的“主页”参数不正确。将其更改为正确的 heroku URL 解决了这个问题。

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

希望这个补充有帮助。

原文由 Michael Morrison 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题