'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