Ich habe eine kleine App mit React erstellt und einige einfache Routen eingerichtet. Es funktioniert gut auf dem Client auf meinem localhost. Der gesamte JS-Code ist in einer Datei gebündelt und wird über eine index.html-Datei aufgerufen. Bei der Bereitstellung auf dem Server funktionieren Anforderungen an die Routen nicht, da alles auf der Clientseite erfolgt.Reactor SSR: Fehler Uncaught SyntaxError: Unerwartetes Token <
Um dies zu beheben, habe ich versucht, mehrere Tutorials zum Serving der Indexdatei mit ExpressJS zu betrachten, so dass ich die Client-App auf jede Route laden kann. Das Problem ist, dass wenn ich die Indexdatei diene gibt es mir die HTML-Datei zurück und ich bekomme diesen Fehler: app.js:1 Uncaught SyntaxError: Unexpected token < und ich bin mir nicht sicher, warum das passiert und wie ich das lösen kann. Immer wenn ich das Skript-Tag entferne, wird die Datei mit ein wenig HTML korrekt geliefert. Ich bin mir nicht sicher, was ich zu diesem Zeitpunkt tun soll, da andere Quellen, die ich gefunden habe, auch nicht sehr hilfreich sind. Was muss ich tun, um das zu beheben?
Hier ist meine Server-Datei:
const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()
app.use(express.static(__dirname + '/dist'))
app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, '../dist', 'index.html'))
})
app.listen(port)
Und hier ist meine Index-Datei per Express bedient:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>app</title>
<!-- build:css css/app.min.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
</head>
<body>
<div id="app"></div>
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<!-- endbuild -->
</body>
</html>
Dank!