CODEWITHSUNDEEP
javascriptreactjswebpack
David AK
David AK

Reputation: 125

Webpack Module build failed when importing React components

I'm working on a project to integrate React and ASP.Net together. I've made the initial Hello World and every works as expected (not hard :p). I'm using webpack with babel-loader to generate my `bundle.js. 

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>LPMU</h1>, document.getElementById('root'))

This is my webpack.config.js file:

module.exports = {
    context: __dirname,
    entry: "./App.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]
    }
}

After this worked out, I tried to add my App.js component and all other components into my react folder, inside Scripts on my ASP.NET project. I'm not doing the export default App since I'm using the ReactDOM.render(). I import my components into my App.js as usual:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Landing from './Landing';
import * as lpmuGlobal from './lpmu-global';

And then I just render the App component:

ReactDOM.render(<App />, document.getElementById('root'))

Now when I run npm run webpack again, I get 2 problems, which are the following:

  size   name  module    status
  704 B  0     ./App.js  built failed ✖

  Δt 596ms (1 asset hidden)


./App.js
  0:0  error  Module build failed (from ./node_modules/babel-loader/lib/index.js):

configuration
  0:0  warning  The 'mode' option has not been set, webpack will fallback to
                'production' for this value. Set 'mode' option to 'development' or
                'production' to enable defaults for each environment.

✖ 2 problems (1 error, 1 warning)

I've been searching for a solution, but since I'm really new to webpack, I don't know what happens, if I need anything else on my webpack.config.js, if I have to import my components in any other way or whatever.

ALso this is my json.package:

{
  "name": "lpmu-react-app",
  "version": "1.0.0",
  "description": "Integración de ReactJS con ASP.NET",
  "main": "App.js",
  "scripts": {
    "start": "react-scripts start",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "DPS",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "webpack-command": "^0.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.4"
  }
}

Thanks

Upvotes: 0

Views: 1464

Answers (1)

Ragul Parani
Ragul Parani

Reputation: 621

The error is because you have not added a .babelrc file or babel options to your package.json file to provide babel options.

In order to enable the preset you have to define it in your .babelrc file

Add babel option to your package.json as such :

package.json:

 {
  "name": "lpmu-react-app",
  "version": "1.0.0",
  "description": "Integración de ReactJS con ASP.NET",
  "main": "App.js",
  "scripts": {
    "start": "react-scripts start",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel":{
   "presets": ["env","react"]
  }
  "author": "DPS",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "webpack-command": "^0.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.4"
  }
}

Go through the below links for further clarification:

https://babeljs.io/docs/en/babelrc.html

https://babeljs.io/en/setup/#installation

About the warning :

Webpack 4 needs you to include the mode option to your configuration, as you would usually want to have development and production configurations separate.

Go through the link below which explains in detail how to set configurations. https://www.valentinog.com/blog/webpack-4-tutorial/

module.exports = {
    context: __dirname,
    entry: "./App.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]
    }
}

Hope that helps :)

Upvotes: 1

Related Questions