Reacte Unexpected Token <

Question

Ich arbeite durch die react router tutorial mit meiner eigenen benutzerdefinierten Webpack-Build, und ich bekomme einen "Unerwarteten Token <" Fehler. Dies ist normalerweise auf den babel transpiler being incorrectly specified zurückzuführen. Dies ist jedoch hier nicht der Fall. Mein transpiler funktioniert so, wie er während der Entwicklung des Dev-Builds angegeben wurde, aber es schlägt unter dem gleichen Setup für den Produktions-Build fehl. Ich habe keine Idee warum.

Meine .babelrc Datei hat die richtigen Voreinstellungen:

... 
"presets": ["es2015", "stage-0", "react"] 
... 

Mein webpack.config.js diese verwendet für Entwickler transpile:

loaders: [{ 
     test: /\.js$/, 
     loaders: ['react-hot', 'babel?cacheDirectory=' + PATHS.cache], 
     exclude: PATHS.node_modules 
    }... 

Mein webpack.config.js diese verwendet, um transpile für prod:

loaders: [{ 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: PATHS.node_modules, 
    }... 

und meine package.json hat alle richtigen Bibliotheken:

... 
"devDependencies": { 
    "babel-core": "^6.0.20", 
    "babel-eslint": "^4.1.3", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-transform-runtime": "^6.12.0", 
    "babel-preset-es2015": "^6.0.15", 
    "babel-preset-react": "^6.0.15", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-stage-0": "^6.0.15", 
... 
"dependencies": { 
    "react": "^0.14.6", 
    "react-d3-wrap": "^2.1.2", 
    "react-dom": "^0.14.6", 
    "react-redux": "^4.4.5", 
    "react-router": "^2.7.0", 
... 

Merkwürdiger, berichtet Chrome, dass die HTML vom index.html hat eigentlich die Haupt js-Datei ersetzt. Und damit der Fehler.

Allerdings zeigt die Dateien direkt Inspektion, dass dies nicht der Fall ist:

Sie einen Repo des Build finden here

Jede Idee, was sein könnte, hier los?

BEARBEITEN: Wenn mein Server das Bundle anfordert, bekommt es HTML zurück. Also vielleicht gibt es etwas falsch mit dem prod-Server:

var express = require('express'); 
var path = require('path'); 
var compression = require('compression'); 

var app = express(); 

app.use(express.static(path.join(__dirname, 'dist'))); 

app.get('*', function (req, res) { 
    res.sendFile(path.join(__dirname, 'dist', 'index.html')) 
}); 

var PORT = process.env.PORT || 8080; 
app.listen(PORT, function() { 
    console.log("Production express server running at localhost: " + PORT) 
}); 

EDIT2: Etwas stimmt nicht mit, wie ich Anfragen hier bin zu lösen. Wenn ich entferne:

Ich bin dann in der Lage, Anfragen an das Bündel zu senden und das Bündel zurück zu bekommen. Mit dieser Eingabe wird beim Senden einer Anfrage zum Erhalt des Pakets index.html zurückgegeben.

Answer 1

Als agmcleod vorgeschlagen, musste ich die Art und Weise ändern, wie mein Express-Router Anforderungen bearbeitet: get('*', ... benötigt, um auf get('/', ... geschaltet werden. Zusätzlich musste ich meinen öffentlichen Webpack-Pfad zu '/' statt path.join(__dirname, 'dist') ändern. Webpack hat vollständig qualifizierte Verzeichnisse in meine src-Attribute eingefügt und machte sie nicht relativ zum statischen Pfad auf meinem Express-Server.

Es gibt andere Probleme in dem referenzierten Repo, aber ich glaube, dass sie nicht mit der Frage verbunden sind.

Dank @DavidTyron und @agmcleod für mich auf dem richtigen Weg.