Develop Reference

Webpack with Babel gives uncaught referenceError: require is not defined

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'
};

How to set up webpack custom entry and output

I'm learning webpack 4. Is there a way to set custom entry and output, because no tutorial seems to explain that.

You can try the following link:
https://www.valentinog.com/blog/webpack-4-tutorial/#webpack_4_overriding_the_defaults_entryoutput
Quote from the link:
I love webpack 4 zero conf but how about overriding the default entry point? And the default output?
Configure them in package.json!
An example from the link:
"scripts": {
"dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
"build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}
Hope this helps.

You can configure entry and output in webpack.config.js. In example configuration below I have added entry as a string whereas you can add as an object and array as well and in a similar way you can add output key as a string, as follows:
var path = require('path');
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
},
mode: 'development',
entry: './app/main.js',
cache: true,
output: {
path: __dirname,
filename: './resources/script.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
}
};
Below is the package.json to work with npm dependencies:
{
"name": "reactjs",
"version": "1.0.0",
"description": "React Js",
"keywords": [
"react"
],
"author": "Arpit Aggarwal",
"dependencies": {
"axios": "^0.18.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch -d"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}

Module build failed on function

I've created a MERN (MongoDB, ExpressJS, React, Node) project via express-generator (express myNewApp).
Inside a react component I have this piece of ES6 code
onChange = (event, { newValue }) => { // FYI this is line 53
this.setState({
value: newValue
});
};
When I run npm start I get this error: Module build failed: SyntaxError: Unexpected token (53:13).
Here's my package.json:{
"name": "myNewApp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "webpack --progress --colors --watch -d",
"build": "webpack --progress --colors -p"
},
"dependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"body-parser": "~1.16.0",
"cookie-parser": "~1.4.3",
"debug": "~2.6.0",
"ejs": "^2.5.6",
"express": "~4.14.1",
"jade": "~1.11.0",
"mongojs": "^2.4.0",
"morgan": "~1.7.0",
"react": "^15.4.2",
"react-autosuggest": "^9.3.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-router": "^2.6.1",
"serve-favicon": "~2.3.2"
},
"devDependencies": {
"babel-loader": "^6.2.10",
"http-server": "^0.9.0",
"webpack": "^1.13.3"
}
}
My webpack config file looks like this.
var webpack = require('webpack');
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
cache: true,
entry: { main: './views/index.jsx' },
output: { path: 'public/build', filename: '[name].js' },
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel', exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] }},
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
definePlugin,
commonsPlugin
]
};

npm i --save-dev babel-preset-stage-0
Change webpack.config.js: query: { presets: ['react', 'es2015', 'stage-0']

onChange = ... is a class property assignment, in order for your code to transpile using Babel, you need to npm install --save-dev babel-plugin-transform-class-properties, and then to invoke the plugin inside your .babelrc file, see here for full details.

Webpack build step isn't generating build files

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

Why I can can not directly use my main.js file which convert form main.jsx file on browser?

Here is my webpack.config.js code...
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server', 'babel-polyfill', './src/main.jsx'],
output: {
path: "./build",
filename: "main.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
query:
{
presets:['es2015', 'react']
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
}
Here is my package.son file....
{
"name": "udemy-react",
"version": "0.0.1",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot -- content-base build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
After I run npm run dev, I will have my main.js file conevert from .jsx file and everything goes well on localhost:8080.
My question is, why i cannot directly use .js file without running on web pack server?
Because I directly include main.js file in my .html and open in browser, and I got
Uncaught Error: [HMR] Hot Module Replacement is disabled.
I thought web pack already conevert everything for me , so I can directly use it.
What I should do if I want to make a production enviorment?