why babel loader and jsx loader is not working in webpack version 3.x in react app

Question

Package.json this is my package json file. I have already install npm install --save-dev babel-loader babel-core in my app /* Package.json*/

    {
    "name": "tripdetail",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-dev-server",
        "prod": "webpack -p"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel": "^6.23.0",
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.6.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.4",
        "extract-text-webpack-plugin": "^3.0.0",
        "html-webpack-plugin": "^2.30.1",
        "node-sass": "^4.5.3",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.18.2",
        "webpack": "^3.5.4",
        "webpack-dev-server": "^2.7.1"
    },
    "dependencies": {
        "eslint": "^4.4.1"
    },
    "description": ""
}

.babelrc this is my babelrc file. I have also configured it by this code - /*.babelrc */

{
        "presets": ["es2015", "es2016", "react"]
    }

webpack.config.js this is my webpack config js file. I have also configure module and tested but it is not working.

/webconfig.js code/

    'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ["css-loader", "sass-loader"],
                publicPath: '/dist',
            },
            {
                test: /\.jsx?$/,
                exclude:  /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }           
        )
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        stats: 'errors-only',
        open: true

    },
    plugins: [new HtmlWebpackPlugin({
        title: 'tripDetailPage',
        hash: true,
        minify: {
            collapseWhitespace: false

        },
        template: './src/index.html'
    }), new ExtractTextPlugin({
        filename: "tripDetail.css",
        disable: false,
        allChunks: true
    })]
}

app.js

const css = require('./app.scss');


    import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render(
       <div>Hello</div>,
     //e('div', null, 'Hello Worlddddd'),
      document.getElementById('root')
    );

Compiletion ERROR

ERROR in ./src/app.js
Module parse failed: E:\trip-react\src\app.js Unexpected token (10:3)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|    <div>Hello</div>,
|  //e('div', null, 'Hello Worlddddd'),
|   document.getElementById('root')
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/app.js
webpack: Failed to compile.

Hi Thomas, Thanks for your valuable comment. But I do't know how code is beautify in stackoverflow. — Devendra, Aug 16 '17 at 11:56
HiThomas, I have changed text into readable format please check now — Devendra, Aug 16 '17 at 12:48
Hey, good job. If it's still not up and running I think you should go and try this: https://github.com/coryhouse/pluralsight-redux-starter It's a decent starter kit for react + redux. You can fish out redux if you don't want it. Hope it works for you. — Thomas Johansen, Aug 17 '17 at 06:30
Was a misconfiguration / typo of the file extesion `jsx` vs `js` — Martin, Apr 27 '21 at 14:59

score 0 · Answer 1 · answered Aug 16 '17 at 10:48

0

ERROR in ./src/app.js

Have you tried renaming that file to /src/app.jsx ?

Check out resolve.extensions and module.loaders, in your webpack.config.js file -- both should refer to .jsx files.

answered Aug 16 '17 at 10:48

Rich

3,640
3
20
24

Hi Rich, I have included **webapp config** now. can you please check what is going wrong in my code. – Devendra Aug 16 '17 at 12:50
Check the accepted answer to this question and swap the ordering of your presets ['react', 'es2015'] to ['es2015','react']. [https://stackoverflow.com/questions/36392826/webpack-and-react-unexpected-token?rq=1 – Rich Aug 16 '17 at 13:05

Devendra · Answer 2 · 2017-08-18T07:31:38.603

This error is related to webpack.config.js. Rules was wrongly putted in this file. Here is my correct webconfig.

'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    resolve: {
     extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ["css-loader", "sass-loader"],
                publicPath: '/dist',
            })
            },
            {
            test:/\.js$/,
            use:'babel-loader',
            exclude:/node_modules/
            },
            {
                test:/\.jsx$/,
                use:'babel-loader',
                exclude:/node_modules/
            }
            ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        stats: 'errors-only',
        open: true

    },
    plugins: [new HtmlWebpackPlugin({
        title: 'tripDetailPage',
        hash: true,
        minify: {
            collapseWhitespace: false

        },
        template: './src/index.html'
    }), new ExtractTextPlugin({
        filename: "tripDetail.css",
        disable: false,
        allChunks: true
    }),]
}

why babel loader and jsx loader is not working in webpack version 3.x in react app

2 Answers2