Сборка Create-React-App - "Uncaught 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"]
}

Не уверен, что это актуально, но у меня есть это на моем экспресс-сервере, который я считаю стандартным:

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, запустив pm2 serve build, поэтому я думаю, что проблема может быть в конфигурации моего сервера.

Answer 1

Спасибо, это мне очень помогло.Просто хочу добавить к этому пример из проекта Create-React-App, у которого было то же решение: я получил ту же ошибку после развертывания на heroku.

Uncaught SyntaxError: Неожиданный токен <после подачи-s build </p>

Для меня проблема была в файле packages.json.Параметр "homepage", который я дал, был неверным.Изменение правильного URL-адреса heroku решило проблему.

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

Надеюсь, что это дополнение полезно.

Answer 2

Я создал версию приложения реакции, используя "npm run build". У меня есть сервер (узел / экспресс). Я хотел включить сборку на стороне сервера и развернуть на героку. Я скопировал папку сборки в корневую папку сервера и использовал код в файле запуска на стороне сервера:

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 3

Я закончил тем, что нашел ответ здесь: 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, доставленный в браузер, несмотря на ошибку.Возможно, полностью статический файл будет работать с первым блоком, но мне было бы интересно узнать, верно ли это.