web-dev-qa-db-ja.com

Create-React-Appビルド-「キャッチされていないSyntaxError：予期しないトークン<」

この質問は何度も尋ねられたことに気づきましたが、何もうまくいきませんでした...

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を自動的に処理するべきではありませんか？

[〜＃〜] update [〜＃〜]：この質問を投稿しましたが、すでに関連する更新があります。 pm2 serve buildを実行することで、pm2を介して静的にページを提供できるので、サーバー構成に問題がある可能性があります。

reactjswebpackjsxcreate-react-app
11
SuperCodeBrah

私はここで答えを見つけました： 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 });
})

最初のブロックが機能しなかったのは間違いなく少し奇妙です。エラーが発生しても、ブラウザにindex.htmlファイルが配信されるので、Reactプロジェクトの相対リンクに何らかの関係があると思います。完全に静的なファイルは最初のブロックで作業しますが、それが正しいかどうか知りたいです。

7
SuperCodeBrah

ありがとう、これは私を大いに助けてくれました。これに、同じソリューションを持つCreate-React-Appプロジェクトの例を追加したいと思います。herokuにデプロイした後、同じエラーが発生しました。

キャッチされていないSyntaxError：serve -sビルド後の予期しないトークン<

私にとっての問題はpackages.jsonファイルにありました。私が与えた「ホームページ」パラメータは間違っていました。これを正しいheroku URLに変更すると、問題が解決しました。

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

この追加がお役に立てば幸いです。

12
Michael Morrison

削除するだけ

"ホームページ"： "アプリのURL"

それを修正するためにpackage.jsonから

3
ngCourse

「npm run build」を使用して、react appのビルドバージョンを作成しました。サーバー（ノード/エクスプレス）があります。サーバー側にビルドを組み込み、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を見つけることができました。

1
Nikhil Nayyar

クライアントをS3にデプロイする場合、react-deploy-s3でデプロイするときに、CloudFrontからdistribution-idを割り当てます

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