CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
Parit
Parit

Reputation: 152

Simple Webpack + React + ES6 + babel example doesn't work. Unexpected token error

am getting a parsing error while running webpack to compile the jsx syntax. Would appreciate if someone could point me to the error. I see a similar question asked Webpack, React, JSX, Babel - Unexpected token < but the solution suggested there doesn't work for me.

This is how my config files look like:

package.json 

 {
  "name": "dropdowns",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1"
  },
  "devDependencies": {
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "author": "",
  "license": "ISC"
}

my webpack.config.js file is 

    module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",

    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }


};

In a local app folder I have main.js and IdMappingOptions.js as follows:

// in IdMappingOptions.js
import React from 'react';
class IdMappingOptions extends React.Component {
    render () {
        return <span>Hello!</span>
    }
}
export default IdMappingOptions;
// in main.js
    import React from 'react';
import { render } from 'react-dom';
import IdMappingOptions from './IdMappingOptions';

render(
    <IdMappingOptions/>, document.body
);

when running node_modules/.bin/webpack I get the following error trace:

Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 37ms
  [0] ./main.js 0 bytes [built] [failed]
ERROR in ./main.js
Module parse failed: /scratch/parallel/repository/dropdowns/app/main.js    Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
 SyntaxError: Unexpected token (6:4)
 at Parser.pp.raise (/scratch/parallel/repository/dropdowns/node_module/acorn/dist/acorn.js:923:13)

Edit: as per the comments below fixed the test pattern and added babel-core in the webpack.config.js. Here is my directory structure

Upvotes: 3

Views: 528

Answers (2)

robertklep
robertklep

Reputation: 203251

Your test seems faulty:

test: "/.js$"

Try this:

test: /\.js$/

Upvotes: 4

F. Kauder
F. Kauder

Reputation: 889

You need babel-core to use babel in your project. (https://github.com/babel/babel-loader#installation).

npm install --save-dev babel-core

Upvotes: 1

Related Questions