Webpack + React16 + Javascript ES6 "Unexpected token" error

user_1579824 0
Viewed 437

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?

babeljs webpack reactjs javascript
1 Answers

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

user_14180490
Related