Module parse failed using Webpack

Question

Hi I am student developer. I facing an error like this

ERROR in ./src/index.js 5:16 Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | import App from '../src/components/App' |

ReactDOM.render(,document.getElementById("app")); i ｢wdm｣: Failed to compile.

I am starting to learn webpack what it is but I do not have enough information about solving this. Could you help me at this issue to solve ?

package.json Dev Part :

 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

My webconfig :

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

module.export = {
    entry : './src/index.js',
    output : {
        path:path.join(__dirname,'/dist')   ,
        filename:'index_bundle.js' 
    },
    module:{
        rules : [{
            test : /\.js$/,
            exclude: /node_modules/,
            use : {
                loader : 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

index.js

import React from 'react';
import ReactDOM from 'react-dom'
import App from '../src/components/App'

// Error is he
ReactDOM.render(<App />,document.getElementById("app"));

App.js:

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default App;

Arun AK · Accepted Answer · 2020-03-12 09:03:58Z

1

There are two mistakes in your webpack configuration, which is causing this issue.

There is a typo error. Change module.export to module.exports (This one drive me crazy man :P)
As @Muhammad mentioned, you need to mention webpack to compile the react. So, I have added '@babel/react' as presets for the babel-loader.

Below is the webpack that is working for me:

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

module.exports = {
    entry : './src/index.js',
    output : {
        path:path.join(__dirname,'/dist')   ,
        filename:'index_bundle.js' 
    },
    module:{
        rules : [{
            test : /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
        options: {
          presets: [
            '@babel/react',
            
          ]
        }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

Hope it helps :)

answered Mar 12, 2020 at 9:03

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emre Sert Over a year ago

I tried and your code works correctly. Thanks your advice. I checked your answer as an useful.

Arun AK Over a year ago

@EmreSert Glad that it helps you

Muhammad Zeeshan · Accepted Answer · 2020-03-12 09:06:34Z

0

You need to tell webpack that you are compiling react. You need to update your rule as:

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

module.exports = {
    entry : './src/index.js',
    output : {
        path:path.join(__dirname,'/dist')   ,
        filename:'index_bundle.js' 
    },
    module:{
        rules : [{
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: {
            presets: ["react"]
          }
       }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

edited Mar 12, 2020 at 9:06

answered Mar 12, 2020 at 8:52

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

2 Comments

Emre Sert Over a year ago

Thanks a lot. It works correctly with npm install babel-loader@7 babel-core command.

Muhammad Zeeshan Over a year ago

Glad to know that it was useful for you.

Collectives™ on Stack Overflow

Module parse failed using Webpack

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related