CODEWITHSUNDEEP
reactjswebpack
Emre Sert
Emre Sert

Reputation: 330

Module parse failed using Webpack

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;

Upvotes: 0

Views: 988

Answers (2)

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 4748

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'
        })
    ]
}

Upvotes: 0

Arun AK
Arun AK

Reputation: 4370

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

  1. There is a typo error. Change module.export to module.exports (This one drive me crazy man :P)

  2. 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 :)

Upvotes: 1

Related Questions