Webpack - Uncaught SyntaxError: Unexpected token import with Redux

Question

I have been trying out React with Webpack and Redux and stumbled upon an Uncaught SyntaxError: Unexpected token import.

I know that there is a lot of questions like these, but I have find none that involves Redux.

Here is my webpack config:

var app_root = 'src'; // the app root folder: src, src_users, etc
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
app_root: app_root, // the app root folder, needed by the other webpack 
configs
entry: [
// http://gaearon.github.io/react-hot-loader/getstarted/
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'babel-polyfill',
__dirname + '/' + app_root + '/index.js',
],
output: {
path: __dirname + '/public/js',
publicPath: 'js/',
filename: 'bundle.js',
},
module: {
loaders: [
  {
    test: /\.js$/,
    loaders: ['react-hot', 'babel'],
    exclude: /node_modules/,
  },
  {
    // https://github.com/jtangelder/sass-loader
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'],
  },
  {
    test: /\.css$/,
    loaders: ['style', 'css'],
  }
 ],
 },
 devServer: {
  contentBase: __dirname + '/public',
 },
 plugins: [
 new CleanWebpackPlugin(['css/main.css', 'js/bundle.js'], {
  root: __dirname + '/public',
  verbose: true,
  dry: false, // true for simulation
}),
],
};

index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore} from 'redux';

// importera App komponenten
import App from './components/App';
// importera stylesheet
import './stylesheets/main.scss';
//importera reducer
import { reducers } from './reducers/index';
import Provider from "react-redux/src/components/Provider";


// skapa users-list, tomt objekt
let users = [];
for (let i = 1; i < 10; i++) {
 // fyller objektet med användare med dessa villkor
 users.push({
    id: i,
    username: 'Andreas' + i,
    job: 'leethacker' + i,
 });

 const initialState = {
 users: users,
 }
 }

 // skapa Store
 const store = createStore(reducers, initialState);

 // skriver sedan ut denna komponent, render är Reacts funktion för att 
 skriva ut
 ReactDOM.render(
<Provider store ={store}>
<App/>
</Provider> , document.getElementById('App'));

Package.json file:

{
"name": "redux-minimal",
"version": "1.0.0",
"description": "Start building complex react-redux apps today, with 
this minimalist easy to understand starter kit (boilerplate)",
"keywords": [
"react",
"redux",
"minimal",
"starter kit",
"boilerplate"
],
"main": "index.js",
"homepage": "http://redux-minimal.js.org/",
"repository": {
"type": "git",
"url": "https://github.com/catalin-luntraru/redux-minimal"
},
"scripts": {
"start": "webpack-dev-server --inline --hot --history-api-fallback --
host localhost --port 8080",
"build-dev": "webpack --config webpack.dev.config.js",
"build-prod": "webpack -p --config webpack.prod.config.js",
"test": "mocha --recursive --compilers js:babel-register --require 
 babel-polyfill --require ignore-styles",
"test-watch": "npm test -- --watch"
 },
"babel": {
"presets": [
  "es2015",
  "react",
  "stage-3"
]
},
"author": "Catalin Luntraru",
"license": "MIT",
"dependencies": {
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.1",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-saga": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.17.0",
"babel-runtime": "^6.20.0",
"clean-webpack-plugin": "^0.1.15",
"css-loader": "^0.26.1",
"enzyme": "^2.7.0",
"extract-text-webpack-plugin": "^1.0.1",
"ignore-styles": "^5.0.1",
"mocha": "^3.2.0",
"node-sass": "^4.3.0",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "^1.3.1",
"redux-freeze": "^0.1.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"whatwg-fetch": "^2.0.1"
}
}

That looks like an error in the browser. Did you perhaps include the original source instead of the bundle? — Michael Jungo, Apr 14 '17 at 11:57
No, I'm asking what JavaScript you're including in your HTML. The only file that should be included is the `bundle.js`. If you include your original source, for example `src/index.js,` it won't work because there are import statements, which don't work in the browser. — Michael Jungo, Apr 14 '17 at 12:10
Sorry for any misunderstandings, im kinda new to this and therefore very inexperienced @MichaelJungo — Salam Shaker, Apr 14 '17 at 12:15

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

The error line that I see is indicative of a error that is not being transpiled correct by babel.

See this please, "unexpected token import" in Nodejs5 and babel?

Also, please add the index.js entry file, package.json to be more informative.

Hope this helps!

edited May 23 '17 at 12:10

Community

1
1

answered Apr 14 '17 at 15:21

serenedog7

44
3

score 0 · Answer 2 · answered Apr 24 '17 at 12:09

The error is in webpack.config.js ,as the babel loader is not included properly in config file.change your code as :

         module: {
           loaders: [
              { test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                presets: ['react', 'es2015']
                  }
              },

Webpack - Uncaught SyntaxError: Unexpected token import with Redux

2 Answers2