(ReactJS, Babel, Webpack, NodeJS) Nicht abgefangener SyntaxError: Unerwarteter Token-Import

Ich habe mich selbst umgebracht, um tagelang zu arbeiten, aber ohne Erfolg. Ich benutze ReactJS und Babel. Ich habe Knoten JS sowie Webpack installiert. Es ist eine einfache Hello World App. Der Fehler, den ich bekommen ist:(ReactJS, Babel, Webpack, NodeJS) Nicht abgefangener SyntaxError: Unerwarteter Token-Import

Uncaught SyntaxError: Unexpected token import

Hier ist der Quellcode ist:

package.json

{ 
    "name": "app", 
    "version": "1.0.0", 
    "main": "webapp.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-preset-react": "^6.3.13", 
    "express": "^4.15.3", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "webpack": "^2.5.1" 
    }, 
    "description": "" 
}

webpack.config.js

var path = require('path'); 
module.exports = { 
    entry: './webapp.js', 
    output: { 
    path: './', 
    filename: 'index.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    } 
}

webapp.js

var express = require('express') 

var app = express(); 

app.use(express.static('static')); 

var server = app.listen(3000, function() { 
    var port = server.address().port; 
    console.log("Started server at port", port); 
});

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Hello React!</title> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    </head> 
    <body> 
     <div id="root"></div> 
     <script type="text/javascript" src="App.js"> 
     </script> 
    </body> 
</html>

App.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('root') 
);

Quelle

2017-05-20 mimzah

Gibt es noch etwas Fehler, das Sie mehr oder weniger zitiert haben? – oklas

Probiere babel-loader statt babel –

@ShubhamKhatri es wird nur automatisch den '-loader' angehängt, wenn du es weglässt –

Ihre webpack konfiguriert ist webapp.js Quelle aufzubauen. Dies sind Server-Side-Knoten-Anwendungen. Fügen Sie also Folgendes hinzu:

target: "node"

zu Ihrer Webpack-Konfiguration. Diese Option aktiviert node Build-Umgebung.

Um eine Client-Anwendung zu erstellen, benötigen Sie eine andere Konfiguration. Die webpack Config

target: "web" 
entry: './App.js',

Und Ihre html muss haben muss:

<script type="text/javascript" src="index.js">

statt

<script type="text/javascript" src="App.js">

Da Browser kann nicht verstehen, moderne Syntax. Und Sie müssen kompiliertes js-Paket erstellen und laden.

Quelle

2017-05-20 15:37:44 oklas

Versuchte beide Ansätze. 1) Hinzufügen von Ziel: 'Knoten' 2) Ändern von Babel zu Babel-Loader. Zeigt mir immer noch den Fehler. Gibt es eine einfache Sache, die ich vermisse? Ist es richtig, "App.js" als text/javascript von meiner index.html aus aufzurufen? – mimzah

Sie klären nicht den Fehler und die Codezeile, wo der Fehler ausgelöst wurde. Auch wo du es gesehen hast. Scheint, dass du einen Fehler im Browser hast, also schreibe ich update. – oklas

Ok, ich habe mein Babel auch im Script-Tag JS verwendet.Es wirft diesen Fehler auf: "Uncaught ReferenceError: require ist nicht definiert bei App-compiled.js: 3" – mimzah

(ReactJS, Babel, Webpack, NodeJS) Nicht abgefangener SyntaxError: Unerwarteter Token-Import

Antwort

Verwandte Themen