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
ReactDOM.render(<App />, document.getElementById('root'))
after theclass App extends Component { ... }