I'm trying to add react to my existing web app. I successfully installed all required npm modules but after running npm run wbp
command I got a lot of errors like:
ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/EventListener'
ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'object-assign'
Webpack version:
Version: webpack 4.1.1
My webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/wwwroot/js/stats.jsx'),
output: {
path: path.join(__dirname, 'wwwroot/js/'),
filename: 'admin.js'
},
resolve: {
extensions: ['.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['@babel/preset-react', '@babel/preset-env']
}
}
]
}
};
My package.json:
{
"name": "WebSite",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --display-error-details --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0-beta.40",
"@babel/preset-env": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"cjs": "0.0.11",
"fbjs": "^0.8.16",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10"
}
}
I tried to solve this problem with manual mapping path to fbjs but without success. What am I doing wrong?
UPD: webpack --display-error-details --mode development
generated admin.js for me but also showed me error. Browser console shows me react.development.js:17 Uncaught Error: Cannot find module "object-assign"
error in this case
Finally I got it working:
My package.json:
{
"name": "WebSite",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --display-error-details --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.11",
"webpack-config": "^7.0.0"
}
}
My webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'wwwroot/js/Admin/stats.jsx'),
output: {
path: path.join(__dirname, 'wwwroot/js/Admin'),
filename: 'admin.js'
},
resolve: {
extensions: ['.jsx', '.js']
},
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
query:
{
presets:['react']
}
}]
},
};