Unable to build ES6 version of my React App with webpack and babel-preset-env

Question

I decided to rewrite my existing React App from ES5 to ES6. Below is my

index.js

:

import React from 'react';

import ReactDOM from 'react-dom';

import ToDoList from './to-do-list.jsx';



//Put the components into HTML

ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));

However when I try to build with webpack and launch the app I get the error that:

ERROR in ./src/app/index.js

Module parse failed: /home/sam/devzone/github/simple-react-todo-app/src/app/index.js Unexpected token (6:16)

You may need an appropriate loader to handle this file type.

| 

| //Put the components into HTML

| ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));

I have selected

babel-preset-env

instead of

babel-preset-es2015

, but I highly doubt that this is the cause. Below are snapshots of my

package.json

and my

webpack.config.js

respectively.

package.json

"main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "npm run build",

    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"

  },

  ...

  "dependencies": {

    "react": "^16.0.0",

    "react-dom": "^16.0.0"

  },

  "devDependencies": {

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-preset-env": "^1.6.0",

    "babel-preset-react": "^6.24.1",

    "css-loader": "^0.28.7",

    "eslint": "^4.7.2",

    "eslint-plugin-react": "^7.4.0",

    "style-loader": "^0.18.2",

    "webpack": "^3.6.0",

    "webpack-dev-server": "^2.9.1"

  }

webpack.config.js

const path = require('path');

const webpack = require('webpack');



module.exports = {



    entry: path.resolve(__dirname, 'src') + '/app/index.js',

    output: {

        path: path.resolve(__dirname, 'dist') + '/app',

        filename: 'bundle.js',

        publicPath: '/app/'

    },

    module: {

        loaders: [

            {

                test: /\.jsx?$/,

                include: path.resolve(__dirname, 'src'),

                loader: 'babel-loader',

                query: {

                        "presets": [

                            ["env", {

                                "loose": true,

                                "modules": false,

                                "useBuiltIns": true,

                                "debug": true,

                                "include": ["transform-es2015-classes"]

                            }],

                            "react"

                        ],

                        "plugins": [

                            "babel-plugin-transform-es2015-parameters",

                            "babel-plugin-transform-es2015-destructuring"

                        ]

                }

            },

            {

                test: /\.css$/,

                loader: 'style-loader!css-loader'

            }

        ],

        rules: [

            {

            test: /\.css$/,

            use: [ 'style-loader', 'css-loader' ]

            }

        ]

    }

};

As it might be evident that I did a bit trial and error myself, but I seem to be totally lost now.

The app folder structure and other relevant files can be seen inside my repo here.

Any pointers would be appreciated.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Your webpack's config is wrong (it's old config from Webpack 1)

You should change it to:

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

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        rules: [
             {
                test: /\.jsx?$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                options: {
                        "presets": [
                            ["env", {
                                "loose": true,
                                "modules": false,
                                "useBuiltIns": true,
                                "debug": true,
                                "include": ["transform-es2015-classes"]
                            }],
                            "react"
                        ],
                        "plugins": [
                            "babel-plugin-transform-es2015-parameters",
                            "babel-plugin-transform-es2015-destructuring"
                        ]
                }
            },
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
};

Unable to build ES6 version of my React App with webpack and babel-preset-env

Sign up