代码之家 › 专栏 › 技术社区 › SuperCodeBrah

创建React App build-“Uncaught SyntaxError:意外标记<”

create-react-app jsx webpack reactjs

SuperCodeBrah · 技术社区 · 5 年前

我正在尝试创建 create-react-app 但我得到了以下错误:

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

由于这些文件被缩小,我不知道从哪里开始调试它们。

根据其他人的回答,以下是我尝试过的一些事情:

//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"]
}

不确定这是否相关,但我的express服务器上有这个,我相信它是标准的:

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问题,那么整个事情非常混乱-不应该自动处理JSX吗?

:我刚刚发布了这个问题,但已经有了相关的更新。我可以通过运行 pm2 serve build

2 回复 | 直到 5 年前

Michael Morrison 5 年前

谢谢,这对我帮助很大。在部署到heroku之后,我收到了同样的错误。

Uncaught SyntaxError:意外的标记<在service-s构建之后

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

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

希望这个补充是有帮助的。

SuperCodeBrah 5 年前

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 尽管出现错误,但仍将文件传递到浏览器。也许一个完全静态的文件可以处理第一个块,但我想知道这是否正确。

Nikhil Nayyar 5 年前

我使用“npm run build”创建了react应用程序的构建版本。我有一个服务器(node/express)。

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')));

我的static index.html服务很好,能够找到css和js资源。

Shashwat Gupta 4 年前

只需移除

从package.json修复它

diegoolavarriau 4 年前

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