2016-03-29 10 views
1

Ich versuche, meine App aus dem Server-Rendering zu bekommen und so versuchte, das ServerRendering Beispiel zur Umsetzung von hier: http://redux.js.org/docs/recipes/ServerRendering.htmlServer Rendering Syntax mit React/Redux/Express

ich server.js erfolgreich laufen kann, aber ich bekomme einen "Uncaught SyntaxError: Unexpected Token <" Fehler @ bundle.js: 2 sobald ich localhost geladen habe. Ich glaube, es hat mit der renderFullPage() Funktion zu tun:

function renderFullPage(html, initialState) { 
    return ` 
    <!doctype html> 
    <html> 
     <head> 
     <title>Redux Universal Example</title> 
     </head> 
     <body> 
     <div id="root">${html}</div> 
     <script> 
      window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} 
     </script> 
     <script src="/dist/bundle.js"></script> 
     </body> 
    </html> 
    ` 
} 

Wenn ich die Linie <script src="/dist/bundle.js"></script> der Fehler geht weg entfernen, aber dann wird der Zähler nicht. Hier

ist die bundle.js, dass die Fehler Referenzen:

bundle.js

Es sollte bundle.js in meinen dist-Ordnern wird Referenzierung, aber es ist nicht aus irgendeinem Grunde? Wenn ich machen eine Datei index.html genau das gleiche wie das, was renderFullPage zurückkehrt, außer loszuwerden ${html} und <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

dann der Zähler funktioniert gut. Wenn ich das serverseitige Rendering mache, scheint es so, als ob der Client den bundle.js-Code nicht finden kann. Er erstellt also einen, der genau den gleichen Code hat wie der Server und daher gibt es einen Fehler, wenn er in html läuft Es erwartet Javascript.

+0

"Wenn ich die Zeile entferne, verschwindet der Fehler, aber dann funktioniert der Zähler nicht." Von welcher Linie sprichst du? – David

+0

, ich denke, das Problem ist, dass der Client die Datei /dist/bundle.js, die die Datei ist, die mein Webpack ausgibt, nicht aufnimmt. –

+0

huh ... das war nicht für mich vor ... Entschuldigung – David

Antwort

0

Es liegt daran, dass Ihr bundle.js HTML und nicht Ihre clientseitigen Skripts enthält. Verwenden Sie eine Catch-All-Route und lassen Sie Ihre statischen Assets nicht laden? Ihr express.static Middleware use Anruf sollte vor diesem Bit Code gehen (Middleware-Bestellung ist wichtig).

Verwandte Themen