I added react-router v4 to my project with Webpack and NodeJS. The app compiled correctly without any error messages in the log, but the browser console gave me this:
Uncaught SyntaxError: Unexpected token import at Object.<anonymous> (bundle.js:3391) at __webpack_require__ (bundle.js:556) at fn (bundle.js:87) at Object.eval (eval at <anonymous> (bundle.js:1405), <anonymous>:11:25) at Object.eval (eval at <anonymous> (bundle.js:1405), <anonymous>:24:27) at eval (eval at <anonymous> (bundle.js:1405), <anonymous>:25:30) at Object.<anonymous> (bundle.js:1405) at __webpack_require__ (bundle.js:556) at fn (bundle.js:87) at Object.eval (eval at <anonymous> (bundle.js:3379), <anonymous>:12:17)
I think that the problem is in the Webpack configuration. This is my webpack.config.js
:
var path = require('path') var webpack = require('webpack') var NpmInstallPlugin = require('npm-install-webpack-plugin') var autoprefixer = require('autoprefixer'); var precss = require('precss'); module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ 'webpack-hot-middleware/client', 'babel-polyfill', './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new NpmInstallPlugin() ], module: { preLoaders: [ { test: /\.js$/, loaders: ['eslint'], include: [ path.resolve(__dirname, "src"), ], } ], loaders: [ { loaders: ['react-hot', 'babel-loader'], include: [ path.resolve(__dirname, "src"), ], test: /\.js$/, plugins: ['transform-runtime'], presets: ['es2015','react'] }, { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function () { return [autoprefixer, precss]; } }
Here is my package.json
file:
{ "name": "redux-ru-tutorial", "version": "1.0.0", "description": "Redux RU tutorial", "main": "index.js", "scripts": { "start": "node server.js" }, "author": "Yuriy Shipovalov", "license": "MIT", "devDependencies": { "autoprefixer": "^6.3.1", "babel-core": "^6.4.5", "babel-eslint": "^4.1.6", "babel-loader": "^6.2.1", "babel-plugin-transform-runtime": "^6.4.3", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.3.13", "css-loader": "^0.23.1", "eslint": "^1.10.3", "eslint-loader": "^1.2.1", "eslint-plugin-react": "^3.16.1", "express": "^4.13.4", "npm-install-webpack-plugin": "^2.0.2", "postcss-loader": "^0.8.0", "precss": "^1.4.0", "react-hot-loader": "^1.3.0", "style-loader": "^0.13.0", "webpack": "^1.12.12", "webpack-dev-middleware": "^1.5.1", "webpack-hot-middleware": "^2.6.4" }, "dependencies": { "babel-polyfill": "^6.3.14", "babel-runtime": "^6.3.19", "cors": "^2.8.3", "history": "^4.6.1", "jquery": "^3.2.1", "react": "^0.14.6", "react-dom": "^0.14.6", "react-redux": "^4.0.6", "react-redux-router": "0.0.5", "react-router": "^4.1.1", "react-router-dom": "^4.1.1", "redux": "^3.3.1", "redux-logger": "2.5.2", "redux-thunk": "1.0.3" } }
Here is my index.js
file:
import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import {BrowserRouter as Router, Route} from 'react-router-dom' import App from './containers/App' import './styles/app.css' import configureStore from './store/configureStore' const store = configureStore() console.log(store.getState()) render( <Provider store={store}> <Router> <Route> path="/" component={App}></Route> </Router> </Provider>, document.getElementById('root') )