Webpack - Uncaught SyntaxError: Unerwarteter Token-Import

Question

Ich erhalte beim Import der Anwendung einen unerwarteten Token-Importfehler. Bitte haben Sie einen Blick auf meine Web-Pack Config Setup -

- Webpack.config.js -

var path = require("path"); 

module.exports = { 
    entry: ['./main.js'], 
    output: { 
     path: path.join(__dirname, 'build'), 
     filename: "bundle.js", 
     publicPath: '/build' 
    }, 
    resolve: { 
     modules: [ 
     path.resolve('./src'), 
     path.resolve('./node_modules') 
     ], 
     extensions: ['.js','.jsx'] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
      presets: ['es2015', 'react'] 
      } 
     }, 
     ] 
    }, 
    devServer: { 
     inline: true, 
     port: 3000 
    } 

    }; 

---

.babelrc

{ 
    "presets": ["es2015"], 
    "plugins": [ 
    ["transform-object-rest-spread"], 
    ["transform-runtime", { 
     "polyfill": false, 
     "regenerator": true 
    }], 
    ] 
} 

---

- --package.json ---

{ 
    "name": "pagination", 
    "version": "1.0.0", 
    "description": "about table pagination", 
    "main": "main.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "material-ui": "^0.16.7", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.3.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-object-rest-spread": "^6.22.0", 
    "babel-plugin-transform-runtime": "^6.22.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-stage-0": "^6.22.0", 
    "install": "^0.8.7", 
    "npm": "^4.2.0" 
    } 
} 

---

Wie Sie im Code sehen können, habe ich Setup die webpack.So trotz der Server die erfolgreich gestartet wird, gibt es einen Fehler

'Uncaught SyntaxError: Unexpected token import'.

Answer 1

So würde ich Ihnen vorschlagen, die entfernen Voreinstellungen von Ihrer .babelrc Datei, da Sie sie bereits in Ihnen enthalten haben webpack und das kann ein Problem verursachen, da Sie react preset in babelrc nicht einschließen.

.babelrc

{ 
    "plugins": [ 
    ["transform-object-rest-spread"], 
    ["transform-runtime", { 
     "polyfill": false, 
     "regenerator": true 
    }], 
    ] 
} 

Zweitens stellen Sie sicher, dass Sie für alle Ihre Importe wie CSS geeigneten Lader haben, svg etc

module: { 
    loaders: [ 
    { test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    }, 
    { test: /\.css$/, loader: "style!css" }, 
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' }, 
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" }, 
    { test: /\.svg$/, loader: "file" } 
    ], 
} 

Sie können einige der oben genannten Lader ausschließen je nach Anforderung und stellen Sie sicher, dass Sie die loaders vor der Verwendung