web-dev-qa-db-fra.com

Build Create-React-App - "SyntaxError Uncaught: jeton inattendu <"

Je réalise que cette question a été posée plusieurs fois mais rien n'a fonctionné pour moi ...

J'essaie de créer une version statique d'un create-react-app project mais j'obtiens les erreurs suivantes:

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

En raison de la minification de ces fichiers, je ne sais pas par où commencer pour les déboguer.

Par d'autres SO réponses, voici quelques choses que j'ai essayées:

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

Je ne sais pas si cela est pertinent, mais je l'ai sur mon serveur express, qui je pense est standard:

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

En supposant qu'il s'agit en fait d'un problème JSX, le tout est très déroutant - ne devrait pas create-react-app gérer JSX automatiquement?

UPDATE : Je viens de poster cette question mais j'ai déjà une mise à jour pertinente. Je peux diffuser la page de manière statique via pm2 en exécutant pm2 serve build donc je pense que le problème peut être avec la configuration de mon serveur.

reactjswebpackjsxcreate-react-app
11
SuperCodeBrah

J'ai fini par trouver une réponse ici: https://github.com/facebook/create-react-app/issues/1812

J'ai réduit la solution complète par le haut, mais j'ai changé:

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

C'est définitivement un peu étrange pour moi que le premier bloc n'ait pas fonctionné. Je suppose que cela a quelque chose à voir avec les liens relatifs dans mon projet React puisque je reçois un index.html fichier livré au navigateur, malgré l'erreur. Peut-être qu'un fichier complètement statique fonctionnerait avec le premier bloc, mais je serais intéressé de savoir si c'est exact.

7
SuperCodeBrah

Merci, cela m'a beaucoup aidé. Je voulais juste ajouter à cela avec un exemple d'un projet Create-React-App qui avait la même solution: j'ai reçu la même erreur après le déploiement sur heroku.

SyntaxError non capturée: jeton inattendu <après la génération de serve -s

Pour moi, le problème était dans le fichier packages.json. Le paramètre "page d'accueil" que j'ai donné était incorrect. La modification de l'URL heroku correcte a résolu le problème.

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

J'espère que cet ajout vous sera utile.

12
Michael Morrison

il suffit de retirer

"page d'accueil": "l'URL de votre application"

à partir de package.json pour le corriger

3
ngCourse

J'ai créé une version de build de l'application react en utilisant "npm run build". J'ai un serveur (nœud/express). Je voulais inclure la construction côté serveur et déployer sur heroku. Ce que j'ai fait, c'est copier le dossier de construction dans le dossier racine du serveur et utiliser le code dans le fichier de démarrage côté serveur:

app.get('/*', function (req, res, next) {
    if (!req.path.includes('api'))
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    else next();
});

J'obtenais la même erreur. Je viens donc de définir le chemin du contenu statique au démarrage:

var app = express();
//here below
app.use(express.static(path.join(__dirname, 'build')));

Et mon index.html statique a été bien servi et a pu trouver des ressources css et js.

1
Nikhil Nayyar

Si vous déployez votre client sur S3, lors du déploiement avec react-deploy-s3, attribuez l'ID de distribution à partir de CloudFront

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