'require is not replaced by webpack-specific require (__webpack_require__)
After upgrading to webpack 5, I am noticing that some of my build files contain plain require statements. As a result, I am getting ReferenceError: require is not defined. For some reason, Webpack is not converting those requires to the webpack-specific webpack_require
I compared my webpack 4 bundle to my webpack 5 bundle. The Webpack 4 bundle clearly replace require with webpack_require as shown in the images below
Webpack 4 bundle showing line 63 require is transpiled to webpack_require
Similar case in some other file
My Webpack 5 configuration simply contains plain require statement which gives me error in browser because require is not defined there.
The require here is not transpiled by webpack 5 Similar case in some other file Webpack5
I have tried switching my babel-preset-env options and it doesn't solve the problem. I have checked my package.json and webpack config do not specify any "type" key. The code that is present in the images and giving me errors is coming from terriajs-cesium package. The following is my webpack configuration (For simplicity, I have removed all css and style loaders along with static loaders):
'use strict';
/*global require*/
var configureWebpackForTerriaJS = require('terriajs/buildprocess/configureWebpack');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var path = require('path');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
// const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function(devMode, hot) {
var config = {
mode: 'development',
entry: './entry.js',
output: {
path: path.resolve(__dirname, '..', 'wwwroot', 'build'),
publicPath: hot ? 'http://localhost:3003/build/' : 'build/',
filename: "MAP.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [
path.resolve(__dirname, '..', 'index.js'),
path.resolve(__dirname, '..', 'entry.js'),
path.resolve(__dirname, '..', 'lib')
],
use:{
loader: 'babel-loader',
options: {
sourceMap: false, // generated sourcemaps are currently bad, see https://phabricator.babeljs.io/T7257
presets: ["@babel/preset-env", '@babel/preset-react'],
plugins: [
'babel-plugin-jsx-control-statements',
'@babel/plugin-transform-modules-commonjs'
]
}
}
},
// some assets and css rules
]
},
plugins: [
new MiniCssExtractPlugin({filename: "MAP.css", ignoreOrder: true}),
new NodePolyfillPlugin(),
],
resolve: {
alias: {},
modules: ['node_modules']
}
};
// The following line sends this config to a file in our core project to further
// add rules. This core project contains an npm package that spits out the require
// error.
return configureWebpackForTerriaJS(path.dirname(require.resolve('CORE PROJECT DIRECTORY')), config, devMode, hot, MiniCssExtractPlugin);
};
The following is the code in configureWebpack.js which is part of our core project:
var path = require('path');
var webpack = require('webpack');
function configureWebpack(terriaJSBasePath, config, devMode, hot, MiniCssExtractPlugin, disableStyleLoader) {
const cesiumDir = path.dirname(require.resolve('terriajs-cesium/package.json'));
config.resolve = config.resolve || {};
config.resolve.extensions = config.resolve.extensions || ['*', '.webpack.js', '.web.js', '.js'];
config.resolve.extensions.push('.jsx');
config.resolve.alias = config.resolve.alias || {};
config.resolve.modules = config.resolve.modules || [];
config.resolve.fallback = {
fs: false,
}
config.resolve.modules.push(path.resolve(terriaJSBasePath, 'wwwroot'));
config.module = config.module || {};
config.module.rules = config.module.rules || [];
// Use Babel to compile our JavaScript files.
config.module.rules.push({
test: /\.(js|jsx)$/,
include: [
path.resolve(terriaJSBasePath, 'lib'),
path.resolve(terriaJSBasePath, 'test'),
],
use: {
loader: require.resolve('babel-loader'),
options: {
sourceMap: false, // generated sourcemaps are currently bad, see https://phabricator.babeljs.io/T7257
presets: ["@babel/preset-env", '@babel/preset-react'],
plugins: [
'babel-plugin-jsx-control-statements',
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-syntax-dynamic-import'
]
}
}
});
config.module.rules.push({
test: /\.xml$/,
include: path.resolve(terriaJSBasePath, 'lib', 'Models'),
type: 'asset/source'
});
config.module.rules.push({
test: /\.json|\.xml$/,
include: path.resolve(cesiumDir, 'Source', 'Assets'),
type: 'asset/resource'
});
config.module.rules.push({
test: /\.js$/,
include: path.resolve(path.dirname(require.resolve('terriajs-cesium/package.json')), 'Source'),
loader: require.resolve('./removeCesiumDebugPragmas')
});
// Don't let Cesium's `buildModuleUrl` see require - only the AMD version is relevant.
config.module.rules.push({
test: require.resolve('terriajs-cesium/Source/Core/buildModuleUrl'),
loader: 'imports-loader'
});
// Don't let Cesium's `crunch.js` see require - only the AMD version is relevant.
config.module.rules.push({
test: require.resolve('terriajs-cesium/Source/ThirdParty/crunch'),
loader: 'imports-loader'
});
config.devServer = config.devServer || {
stats: 'minimal',
port: 3003,
contentBase: 'wwwroot/',
proxy: {
'*': {
target: 'http://localhost:3001',
bypass: function (req, res, proxyOptions) {
if (req.url.indexOf('/proxy') < 0 &&
req.url.indexOf('/proj4lookup') < 0 &&
req.url.indexOf('/convert') < 0 &&
req.url.indexOf('/proxyabledomains') < 0 &&
req.url.indexOf('/errorpage') < 0 &&
req.url.indexOf('/init') < 0 &&
req.url.indexOf('/serverconfig') < 0) {
return req.originalUrl;
}
}
}
},
};
config.plugins = (config.plugins || []).concat([
new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/})
]);
config.resolve = config.resolve || {};
config.resolve.alias = config.resolve.alias || {};
config.resolve.alias['react'] = path.dirname(require.resolve('react'));
config.resolve.alias['react-dom'] = path.dirname(require.resolve('react-dom'));
return config;
}
module.exports = configureWebpack;
I do not understand why Webpack is not transpiling these require statements.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
