0

I get an error when building my first react app. I've tried adding react to the presets of the babel-loader-section but I can't get it to run it.

The error I get is:

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Development/react-redux-todo/src/index.js: Unexpected token (11:2)

   9 |
  10 | render(
> 11 |   <Provider store={store}>
     |   ^
  12 |     <App />
  13 |   </Provider>,
  14 |   document.getElementById('root')

package.json

{
    "name": "testing_redux",
    "version": "1.0.0",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-preset-stage-3": "^6.24.1",
        "cross-env": "^5.0.5",
        "css-loader": "^0.28.5",
        "eslint": "^4.5.0",
        "eslint-loader": "^1.9.0",
        "eslint-plugin-react": "^7.3.0",
        "redux": "^3.7.2",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.18.2",
        "webpack": "^3.5.5",
        "webpack-dev-server": "^2.7.1"
    },
    "dependencies": {
        "lodash.join": "^4.0.1",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "react-redux": "^5.0.6"
    },
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch",
        "start": "cross-env NODE_ENV=development webpack-dev-server --open"
    },
    "babel": {
        "plugins": [],
        "presets": [
            "env",
            "stage-3"
        ]
    }
}

My webpack.config.js

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

module.exports = {
  entry: {
    app: './src/index.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.js$/,
      enforce: 'pre',
      loader: 'eslint-loader'
    }, {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        "style-loader", // creates style nodes from JS strings
        "css-loader",   // translates CSS into CommonJS
        "sass-loader"   // compiles Sass to CSS
      ]
    }]
  },
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.css']
  },
};
Asken
  • 7,679
  • 10
  • 45
  • 77
  • have you tried the solution of this ques: [babel-loader jsx SyntaxError: Unexpected token](https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token) – Mayank Shukla Aug 28 '17 at 14:40
  • Yes, I've tried those but the question is too old to be valid. – Asken Aug 28 '17 at 15:12
  • 1
    Too simple... I had forgot to install the presets for react (`babel-preset-react`) – Asken Aug 28 '17 at 15:30

0 Answers0