Create-React-App构建-“未捕获的SyntaxError：意外令牌<”

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

不知道这是否相关，但是我在我的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问题，那么整个过程就很混乱-不create-react-app应该自动处理JSX吗？

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

Answer 1

只需删除

“主页”：“您的应用网址”

从 package.json 修复它

Answer 2

"homepage": "app-url"从 package.json 中删除。的缺失homepage在的package.json会认为它会在服务器的根目录托管，或者你将成为与构建serve -s build。

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

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

1. 您将使用主 Web 应用程序（即 somedomain.net）映射解决方案文件夹
2. 您将从 IIS 将 Web API 项目转换为应用程序。
3. 然后你会像Web API一样将React App的build文件夹转换为web App
4. 要使前端应用程序正常工作，请指定 "homepage": "somedomain.net/React-Project/Client-App/build"

Answer 3

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

未捕获到的SyntaxError：服务-s构建后出现意外令牌<

对我来说，问题出在packages.json文件中。我提供的“首页”参数不正确。将其更改为正确的heroku URL可解决此问题。

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

希望此添加对您有所帮助。

Answer 4

我使用“npm run build”创建了 React 应用程序的构建版本。我有一个服务器（节点/快递）。我想将构建包含在服务器端并部署到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 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尽管出现了错误，但我确实将文件传递给了浏览器。也许完全静态的文件可以与第一个块一起使用，但是我想知道这是否正确。