Webpack + React16 + Javascript ES6 "Unexpected token" error

Question

I know this question was asked about thousand times, but I didn't find any solution that works. I'm still getting the same error. Here are my config files:

package.json:

{
    "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack"
    },
    "dependencies": {
        "jquery": "^3.2.1",
        "react": "^16.1.1",
        "react-dom": "^16.1.1"
    },
    "devDependencies": {
        "babel": "^6.23.0",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "clean-webpack-plugin": "^0.1.17",
        "css-loader": "^0.28.7",
        "html-webpack-plugin": "^2.30.1",
        "style-loader": "^0.19.0",
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.4"
    }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app/app.jsx',
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query:
                    {
                        presets: ['es2015', 'react']
                    }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/app/index.html'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    }
};

app.jsx:

import React from "react"

React.render(<h1>hello world</h1>, document.getElementById("root-component"));

Webpack throws the following error:

ERROR in ./src/app/app.jsx
Module parse failed: Unexpected token (3:13)
You may need an appropriate loader to handle this file type.
| import React from "react"
|
| React.render(<h1>hello world</h1>, document.getElementById("root-component"));

I tried multiple solutions (like adding .babelrc file with presets), nothing works. Any help?

have you tried import ReactDOM from 'react-dom' instead of using React to render the app in the browser? — AranS
– AranS, Commented Nov 18, 2017 at 15:42
According to the React documentation you have to use ReactDOM.render. Of course, as @AranS already suggested, you have to use import ReactDOM from 'react-dom' as well (note that ReactDOM is just a name). — GuyT
– GuyT, Commented Nov 18, 2017 at 16:31

Maluen · Accepted Answer · 2017-11-18 16:48:02Z

Your webpack.config.js is incorrect as per webpack v3.

You need to add another entry into the rules array just like you are doing for loading CSS.
Moreover query should be renamed options.

See Webpack Documentation for more info on migrating from v2 to v3

The fixed webpack.config.js is as follows:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app/app.jsx',
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ['es2015', 'react']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ],
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/app/index.html'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    }
};

Before:

ERROR in ./src/app/app.jsx Module parse failed: Unexpected token (3:13)

Ater (bundle correctly created):

app.bundle.js 424 kB 0 [emitted] [big] main app.bundle.js.map 499 kB 0 [emitted] main

Collectives™ on Stack Overflow

Webpack + React16 + Javascript ES6 "Unexpected token" error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related