Build-React-App - "Erreur de syntaxe non interceptée: jeton inattendu <"

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 d'en haut, mais j'ai changé:

const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
    res.sendFile('index.html', { root });
})

à:

app.use(express.static('client/build'));
app.get("*", (req, res) => {
    res.sendFile(require('path')
        .resolve(__dirname, 'client', 'build', 'index.html'));
})

C'est vraiment 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 car je reçois un fichier index.html 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.

Merci, cela m'a beaucoup aidé. Je voulais juste ajouter à cela 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 intercepté: jeton inattendu <après la construction de serve -s

Pour moi, le problème était dans le fichier packages.json. Le paramètre "homepage" 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 est utile.

J'ai créé une version de build de l'application react en utilisant "npm run build". J'ai un serveur (node / express). Je voulais inclure la construction côté serveur et la 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:

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

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

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

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

il suffit de supprimer

"homepage": "votre URL d'application"

à partir de package.json pour le réparer

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                        <---

J'ai rencontré le même problème lorsque je souhaite déployer la version statique d'un projet create-react-app sur mon serveur Linux.

J'ai résolu avec ce problème un commentaire sur le github de l'AR et le document officiel de l'AR sur la façon de déployer la version de production .

Par exemple:

Je veux mettre le site Web de construction de production sous quelque chose comme http://example.com/foo/bar .

Lorsque je déploie sans modifier les paramètres par défaut, j'obtiens cette erreur "Uncaught SyntaxError: Uncaught token <" et rien ne s'affiche à l'écran.

Voici la solution:

1) Ajoutez le paramètre de page d'accueil à votre package.json.

- app.use(express.static(path.join(__dirname, '/build')));
+ app.use('/foo/bar/', express.static(path.join(__dirname, '/build')));

2) Ajoutez "/ foo / bar" à toutes vos ressources statiques en css qui ressembleront à:

- linkTo: '/contact'
+ linkTo: '/foo/bar/contact'

3) Ajoutez "/ foo / bar" à tous vos liens et itinéraires.

.dummyimage {
 - content: url('/dummyimage.jpg');
 + content: url('/foo/bar/dummyimage.jpg');
}

4) Changer un peu du code de votre programme de service, dans node.js / express ce sera comme:

+ "homepage": "/foo/bar"

5) Construisez à nouveau.

6) Déployez build / sur le serveur.

7) Redémarrez votre programme de service, comme node.js / express.

Problème résolu!!

J'espère que cette solution est utile.

J'ai rencontré le même problème lorsque je veux déployer mon application react sur les pages github: - il est nécessaire de suivre quelques directives

1. Le nom du référentiel doit être en petit dernier

2. Si le nom du projet est identique au nom du dépôt, cela est utile

3. addd {"predeploy": "npm run build", "deploy": "gh-pages -d build"} sur package.json

4. ajouter un script de page d'accueil au démarrage du package.json

   {"homepage": "http: // [Username] .github.io / [reponame]", "name": "-", "version": "-", "private": boolean,}

Supprimez la "homepage": "app-url" de package.json. L'absence de homepage d' homepage dans package.json supposera qu'elle sera hébergée à la racine du serveur, ou vous servirez la construction avec serve -s build .

Et oui, la spécification de la homepage sera utile lorsque vous allez déployer l'application dans un sous-répertoire de la racine du serveur.

Pour héberger votre application sur l'IIS avec le nom somedomain.net et votre solution dispose déjà d'un projet d'API Web.

1. Vous allez mapper le dossier de solution avec l'application Web principale, c'est-à-dire somedomain.net
2. Vous allez convertir le projet d'API Web en application à partir d'IIS.
3. Ensuite, vous convertirez le dossier de construction de React App en application Web, tout comme l'API Web
4. Pour que l'application frontale fonctionne, spécifiez la "homepage": "somedomain.net/React-Project/Client-App/build"

J'avais rencontré le même problème lors du déploiement de ma version de réaction en production. Après avoir passé des heures à essayer de comprendre ce qui n'allait pas sur un code qui fonctionnait auparavant, j'ai découvert une erreur que j'avais commise lors du déploiement.

Je n'avais pas copié le dossier static à static intérieur de build sur le serveur car j'ai utilisé scp build/* pour copier le dossier build à la place de scp -r build/* .

Je comprends que ce n'est pas la réponse exacte à la question posée ici. Mais j'avais essayé presque toutes les options possibles à partir des réponses données par des experts ici avant de remarquer l'erreur que je faisais. Par conséquent, ajoutez ceci ici en tant que pointeur vers toute personne confrontée à un problème similaire pour vérifier également les étapes de déploiement.