0

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

2
  • Did you actually define your App component? Commented Jun 14, 2018 at 9:53
  • Of course, I'm doing the ReactDOM.render(<App />, document.getElementById('root')) after the class App extends Component { ... }
    – David AK
    Commented Jun 14, 2018 at 9:55

1 Answer 1

1

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

4
  • Thank you for the help, I've made the changes and read the docs, the warning disappeared but I still get the error: ./App.js 0:0 error Module build failed (from ./node_modules/babel-loader/lib/index.js): :(
    – David AK
    Commented Jun 14, 2018 at 11:12
  • github.com/webpack/webpack/issues/1260 - Check this issue. It is mentioned that a similar issue exists because context is using relative path instead of absolute. @DavidAK Commented Jun 14, 2018 at 12:09
  • 1
    I solved it but it wasn't a route problem, Now webpack tells me about an error on my syntax with an arrow function, which is kind of weird because it has babel-react as a dependency ... ERROR in ./App.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: Unexpected token (183:24) 181 | // --------------- HANDLERS BOTONES --------------- 182 | > 183 | handleAñadirVentana = (tipoVentana) => { | ^ 184 | And thanks for all your help
    – David AK
    Commented Jun 14, 2018 at 13:49
  • 1
    Ok I made it installing npm install --save-dev babel-plugin-transform-class-properties and adding plugins: ['transform-class-properties'] into webpack.config.js now I just need my css to load :)
    – David AK
    Commented Jun 14, 2018 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.