mayank mayank - 1 year ago 115
React JSX Question

I am not able to use ecma6 import in my code getting error "unexpected token import "

here is my webpack.config.js code i am using for generating virtual bundle.js :-

var webpack = require('webpack');
var path = require('path');

module.exports = {
devtool :'inline-source-map', //this give us the line no. incase of error
], //this is where webpack look for the files
output : {
path : path.join(__dirname, 'build'),
filename: 'bundle.js'
}, //this is where webpack create the virtual output

resolve: {
modulesDirectories :['node_modules','src'], //this is where webpack look for module directories
extensions : ['','.js'], // this is the extension for which webpack look for

loader :[
test: /\.jsx?$/, //this is to for we can use jsx file if not js file
exclude: /node_modules/, //the part which are not included in our app build
//loader: 'babel-loader'
loaders : ['react-hot','babel-loader','babel?presets[]=react,presets[]=es2015'], // the module which are used to load our app
new webpack.HotModuleReplacementPlugin(), //for live reloading
new webpack.NoErrorsPlugin() // stop app to run if there is any error


and let is working fine but these ecmascript6 keywords like class and import are not working.

webpack 1.13.1
node v6.3.1
npm 3.10.3


"name": "react-todos",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-core": "*",
"babel-loader": "*",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"react-hot-loader": "*",
"webpack": "*",
"webpack-devserver": "*"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"keywords": [],
"author": "",
"license": "ISC"

my code for index.js:-

import React from 'react';
import { render } from 'react-dom';
import App from 'component/app';

render(<App />, document.getElementById('app'))

Answer Source

It looks like webpack is not loading your loaders. Looking into your webpack config file I see a possible issue that can prevent webpack not properly loading the loaders. Your module loader field lacks the ending s. Webpack expects a loaders field and you are providing loader instead that is being ignored.

module: {
  loaders: [

It is subtle but could be the cause.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download