Unexpected token error from Webpack compiling React

Question

I have seen several issues posted that look a lot like this, but none of the solutions have helped so far. I am trying to come up to speed on React. I have tried following every tutorial I could find on the web including some pretty simple, straightforward ones. Not matter what I try, I keep getting an unexpected token error.

index.js:

import React from "react";
import ReactDOM from "react-dom";

const title = 'My React page';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
)

package.json:

{
  "name": "swvreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --display-error-details",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-prop-types": "^0.4.0",
    "webpack": "^4.3.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

webpack.config.js:

const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: ['babel-loader']
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
};

.babelrc:

{
    "presets": [
        "env", 
        "react", 
        "es2015", 
        "stage-2"
    ]
}

The error:

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/work/swvreact/swvreact/src/index.js: 
Unexpected token (7:4)

   5 |
   6 | ReactDOM.render(
>  7 |     <div>{title}</div>,
     |     ^
   8 |     document.getElementById('app')
   9 | )
  10 |

BabelLoaderError: SyntaxError: D:/work/swvreact/swvreact/src/index.js: 
Unexpected token (7:4)

   5 |
   6 | ReactDOM.render(
>  7 |     <div>{title}</div>,
     |     ^
   8 |     document.getElementById('app')
   9 | )
  10 |

    at transpile (D:\work\swvreact\swvreact\node_modules\babel- 
   loader\lib\index.js:65:13)

I have tried moving files around, playing with the configurations, playing with .js and .jsx file types, everything I can think of. The posted code is from about the simplest tutorial I could find and seemed to be the newest.

My set up is a PC running Windows 10, Visual Studio Code, Chrome and Firefox, and the Windows command prompt. All applications are current. I'm sure I'm missing some little thing, but I sure can't find it.

By the way u don't have to use es2015 preset since you have env preset. — Efe
– Efe, Commented Mar 29, 2018 at 11:56

lukas-reineke · Accepted Answer · 2018-03-29 11:52:47Z

1

You get this error if webpack can't find your .babelrc. Make sure you don't have a typo in the filename.
You can also try to put the babel config into you package.json like this:

"babel": {
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
},

Or add the options in your webpack.config.js like this:

test: /\.jsx?$/,
use: {
    loader: 'babel-loader',
    options: {
        presets: [
            'env',
            'react',
            'es2015',
            'stage-2',
        ]
    }
}

answered Mar 29, 2018 at 11:52

lukas-reineke

3,3422 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lars915 Over a year ago

That did it. Figured it was something easy. Thanks!!

Collectives™ on Stack Overflow

Unexpected token error from Webpack compiling React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related