Ich habe ein React-Projekt, das lokal funktioniert, wenn ich seinen Pfad in Chrom öffne. Wenn jedoch versucht, Heroku (oder Laufen npm start
) einsetzen, bekomme ich diesen Fehler:React: Unerwarteter Token-Import beim Ausführen von npm start
import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
Ich habe Stackoverflow und Heroku der Support-Seite ohne Erfolg abgesucht.
Hier ist mein package.json:
{
"name": "my-app-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
"start": "node ./my-app-name.jsx",
"postinstall": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^4.0.0",
"react-router-dom": "^4.0.0",
"redux": "^3.6.0",
"webpack": "^2.3.2"
},
"engines": {
"node": "6.2.1",
"npm": "4.4.4"
}
}
Und mein webpack.config.js:
module.exports = {
entry: "./my-app-name.jsx",
output: {
filename: "./bundle.js"
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
devtool: 'source-map',
resolve: {
extensions: ["*",".js", ".jsx" ]
}
};
Mein Knoten und npm Versionen sind die gleichen wie in package.json aufgeführt. Ich habe dreifach überprüft, um sicherzustellen, dass alles korrekt installiert ist und keine der anderen StackOverflow-Antworten geholfen hat. Sicherlich muss es ein Problem mit Babel sein (weil es import
nicht erkennt), aber ich kann einfach nicht herausfinden, was es ist.
Ich änderte es in 'node./bundle.js' und jetzt bekomme ich ein' ReferenceError: Dokument ist nicht definiert' in meinem Bundle auf 'document.addEventListener' –
Ich vermute, dass der Code nicht in einer Browserumgebung ausgeführt wird. Vielleicht ein Github Repo, damit ich dir weiterhelfen kann? – sammkj
Wenn Sie sowohl Browser als auch Knoten-js unterstützen müssen, müssen Sie entweder Ihren Code anders strukturieren, auf jede Umgebung abzielen oder sogar umgebungsspezifische Funktionen mit bedingten Prüfungen umschließen. Dies könnte auch nützlich sein: https: // www. npmjs.com/package/is-dom – corse32