Uncaught SyntaxError: Unexpected token import
I'm getting unexpected token import error while running the application. Please have a look at my 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"
}
}
As you can see in the code, I've setup the webpack.So despite the server starts the successfully, It gives an error
'Uncaught SyntaxError: Unexpected token import'.
So I would suggest you to remove the presets from your .babelrc file since you have already included them in you webpack and that may cause an issue since you are not including react preset in babelrc .
.babelrc
{
"plugins": [
["transform-object-rest-spread"],
["transform-runtime", {
"polyfill": false,
"regenerator": true
}],
]
}
Secondly make sure that you have appropriate loaders for all your imports like css, 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" }
],
}
You may exclude some of the above loaders depending on your requirement and make sure you are installing the loaders before using