Soumik Das Soumik Das - 1 year ago 233
React JSX Question

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

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.

Answer Source

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' ]
            }
        ]
    }
};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download