When I delete node_modules from my app, and then run npm install, my package-lock.json is changed and react-router is removed from it. I am getting errors that module react-router is not found. Before it was working perfectly. Here is my webpack-config:
`module.exports = {
entry: ['whatwg-fetch', "./js/app.jsx"],
output: { filename: "./js/out.js" },
watch: true,
devServer: {
inline: true,
contentBase: './',
port: 3001
},
module: {
loaders: [
{
test: /\.jsx$/, exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'stage-2', 'react'] }
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}`
and my package.json
`{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "./node_modules/.bin/webpack-dev-server --hot"
},
"author": "test",
"license": "ISC",
"": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"webpack": "^2.2.1"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.6.1"
}
}
`
You most likely just installed react-router-dom without adding it to your dependencies before you deleted your node_modules. Try to install it and add it to your dependencies, and it will work again.
npm i -S react-router-dom
React router dom is uninstalled due to you deleted the node_modules, so you have to re-install the react-router
npm install --save react-router-dom
Related
I configured Webpack with following settings:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
mode: 'development'
};
And babel.config.json:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
The transpilation works fine, but after starting the page in browser i get the following error:
Uncaught ReferenceError: require is not defined
package.json
{
"name": "test",
"version": "0.0.1",
"description": "test",
"main": "main.js",
"scripts": {
"css-build": "node-sass _sass/main.scss dist/main.css",
"css-deploy": "npm run css-build && npm run css-postcss",
"css-postcss": "postcss --use autoprefixer --output dist/main.css dist/main.css",
"css-watch": "npm run css-build -- --watch",
"deploy": "npm run css-deploy && npm run js-build",
"js-build": "babel _javascript --out-dir dist",
"js-watch": "npm run js-build -- --watch",
"start": "npm-run-all --parallel css-watch js-watch",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.13.10",
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
"autoprefixer": "^9.7.6",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015-ie": "^6.7.0",
"node-sass": "^4.13.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.0",
"webpack": "^5.24.4",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
I tried a lot of things, but nothing helps with my problem.
module.exports = {
entry: './app/index.js', // add this in webpack config
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
mode: 'development'
};
I made my own react component npm package and published in npm, now when import and use it in other CRA apps, i get this error when npm start in run in command line .
and in console:
My webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'web',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=512&&name=[path][name].[ext]?[hash]'
}
]
},
mode: 'development',
externals: {
'react': 'commonjs react'
}
};
My package.json file:
{
"name": "primetable1",
"version": "1.0.0",
"description": "A Datatable for react apps based on Primereact",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --watch",
"build": "webpack"
},
"keywords": [
"primereact",
"primeicons"
],
"author": "Anish Arya",
"license": "ISC",
"peerDependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-runtime": "^6.26.0",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.12.19",
"react-scripts": "3.4.0",
"style-loader": "^1.1.3",
"webpack-cli": "^3.3.11",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"classnames": "^2.2.6",
"primeicons": "^2.0.0",
"primereact": "^3.4.0",
"react-transition-group": "^4.3.0"
}
}
My .babelrc file:
{
"presets": ["env"],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx",
"react-hot-loader/babel"
]
}
I followed this article to create and publish npm package:
https://codeburst.io/extracting-a-react-js-component-and-publishing-it-on-npm-2a49096757f5
How to solve this error?
The externals configuration seems wrong – you probably only need externals: [nodeExternals()] (from const nodeExternals = require("webpack-node-externals");).
I am stuck on this error:
You may need an appropriate loader to handle this file type.
import App from "./App";
ReactDOM.render(, document.getElementById("root"));**
I have tried every single Stack Overflow answer for this and it still doesn't work for me.
This is my webpack.config.js file:-
var path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'build/'),
filename: 'index.js',
publicPath: '/build/'
},
resolve: {
modules: [__dirname, 'node_modules']
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
.babelrc file:
{
"presets": ["es2015", "stage-0", "react"]
}
package.json:
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack && babel-node --presets es2015 server.js",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234 --history-api-fallback"
},
"author": "Manav Saxena",
"license": "ISC",
"dependencies": {
"express": "^4.15.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-infinite-scroll-component": "^2.4.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
index.js file:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
I am very new to React and facing problem while following a tutorial. I was able to build and run output js file using webpack command, but I am not able to build it with webpack-dev-server. Can someone find out the mistake?
Here is the exact command I am using npm run dev. Below is the code.
IDE used: Visual Studio Code
Folder Structure:
Here in the structure, the build.min.js file under dist folder i have, is what I built running manually webpack command, but on running webpack-dev-server and changing any .js / .html file it is not rebuilding/reloading. Here are the configuration files.
Package.json
{
"name": "reacr-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"jquery": "^3.1.1",
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^1.14.0"
},
"devDependencies": {
"nodemon": "^1.11.0",
"webpack-dev-server": "^1.16.2"
}
}
Webpack.config.json
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname + "/src",
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}
]
},
output: {
path: __dirname + "/src/dist",
filename: "build.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};`
When I run npm build nothing seems to happen. When I look for the build files I don't see anything. npm start works fine though.
Package.json
{
"name": "pro-react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
}
Webpack.production.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
}
I also have .babelrc file and webpack.config.js file, let me know if those would be useful to see as well, thanks.
Might be related to the fact that build is an internal command. Seems like I have had this happen to me as well in the past. Check out this Question
In order to run a custom script, you can use the npm run-script build or just npm run build. As stated in the NPM documentation