mayank mayank - 4 months ago 25
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
entry:[
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/only-dev-server',
'./src'
], //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

},
module:{
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
}
]
},
plugins:[
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

package.json

{
"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';

console.log("hiii")
render(<App />, document.getElementById('app'))

Answer

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.

Comments