CommonJS plugin `strictRequires` settings always hoists NodeJS conditional `require` calls from an imported UMD file #1381

Bloodsucker · 2022-12-17T19:28:31Z

Bloodsucker
Dec 17, 2022

Hello everyone,

Given a entry-point index.js:

import { doSomething } from "./umd.cjs";

export function entryPoint() {
    doSomething(false);
}

And a UMD bundle ( umd.cjs ) with "dynamic" require calls to NodeJS builtins that are called only under certain conditions:

// Third-party library UMD library are bundled into this file.
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.umd_bundle = {}));
})(this, (function (exports) { 'use strict';
    function doSomething(isNode) {
        if (isNode) {
            return require('os'); // This require is called "dynamically".
        }
    }
    exports.doSomething = doSomething;
}));

A rollup config rollup.config.js:

export default defineConfig([
	{
		input: 'src/index2.js',
		output: [
			{
				file: 'dist/main_bundle.js',
				format: 'umd',
				name: 'mainBundle',
			},
		],
		plugins: [commonjs(), nodeResolve()],
	},
]);

This results in the following final UMD bundle file:

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('os')) :
	typeof define === 'function' && define.amd ? define(['exports', 'os'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mainBundle = {}, global.require$$0));
})(this, (function (exports, require$$0) { 'use strict';

	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

	var umd = {exports: {}};

	(function (module, exports) {
		// Third-party library UMD library are bundled into this file.
		(function (global, factory) {
		    factory(exports) ;
		})(commonjsGlobal, (function (exports) {	    function doSomething(isNode) {
		        if (isNode) {
		            return require$$0; // This require is called "dynamically".
		        }
		    }
		    exports.doSomething = doSomething;
		}));
	} (umd, umd.exports));

	function entryPoint() {
	    umd.exports.doSomething(false);
	}

	exports.entryPoint = entryPoint;

}));

The umd.cjs require require('os'); has been replaced with a return require$$0; which changes the logic that is happening inside the bundle. This also causes the following errors:

src/index.js → dist/main_bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "os". You might need to include https://github.com/FredKSchott/rollup-plugin-polyfill-node
(!) Missing global variable name
https://rollupjs.org/guide/en/#outputglobals
Use "output.globals" to specify browser global variable names corresponding to external modules:
os (guessing "require$$0")

I believe this is somehow expected. However, if I use the setting strictRequires from the plugin @rollup/plugin-commonjs in the rollup.config.js:

plugins: [commonjs({strictRequires: true}), nodeResolve()],

The expectation was to NOT hoist the require('os') call in the resulting final UMD file. In other words. From:

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('os')) : // problem!
	typeof define === 'function' && define.amd ? define(['exports', 'os'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mainBundle = {}, global.require$$0));
})(this, (function (exports, require$$0) { 'use strict';

// ...

to something like (modified manually):

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports', 'os'], factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mainBundle = {}));
})(this, (function (exports) { 'use strict';
// ...

Paradoxically, an imported ES6 module file with dynamic require doesn't result in a hoisted require call.

Does anybody know how to avoid the hoisting of the file and how to fix the bundling errors?

Bloodsucker · 2023-01-13T18:03:09Z

Bloodsucker
Jan 13, 2023
Author

For anyone interested, the workaround I've is to replace require('os')in the library withglobal.require('os')`. This solves the problem with Rollup. However, this in my opinion an "optimization" that the Rollup plugin should stop doing because it breaks logic.

0 replies

xlith · 2024-11-28T14:10:24Z

xlith
Nov 28, 2024

If I understand correctly, somehow commonjs plugin doesn't consider the require as a dynamic unless it's been wrapped by another method.

Using the following basic setup, combining with the ignoreDynamicRequires option, the hoisting and dynamic import problems can be fixed. But the behavior seems to be a bug.

// rollup.config.js

const { defineConfig } = require("rollup");
const commonjs = require("@rollup/plugin-commonjs");

module.exports = [
  defineConfig({
    input: "index.js",
    context: this,
    output: [
      {
        name: "rollup-dynamic-require",
        file: `output.js`,
        sourcemap: "inline",
        format: "umd",
      },
    ],
    plugins: [
      commonjs({
        ignoreDynamicRequires: true, // this is the option for dynamic imports.
      }),
    ],
  }),
];

// index.js

const dynamicRequire = function (module) {
  return require(module);
};

(function rollupDynamicRequire() {
  let required;
  for (const element of [0, 1, 2]) {
    if (element === 0) {
      required = dynamicRequire("http");
    } else if (element === 1) {
      required = dynamicRequire("https");
    } else if (element === 2) {
      required = dynamicRequire("os");
    }
    console.log(required.globalAgent.protocol);
  }
})();

// output.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["rollup-dynamic-require"] = factory());
})(this, (function () { 'use strict';

    function getDefaultExportFromCjs (x) {
        return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
    }

    var rollupDynamicRequire = {};

    var hasRequiredRollupDynamicRequire;

    function requireRollupDynamicRequire () {
        if (hasRequiredRollupDynamicRequire) return rollupDynamicRequire;
        hasRequiredRollupDynamicRequire = 1;
        const dynamicRequire = function (module) {
          return require(module);
        };

        (function rollupDynamicRequire() {
          let required;
          for (const element of [0, 1, 2]) {
            if (element === 0) {
              required = dynamicRequire("http");
            } else if (element === 1) {
              required = dynamicRequire("https");
            } else if (element === 2) {
              required = dynamicRequire("os");
            }
            console.log(required.globalAgent.protocol);
          }
        })();
        return rollupDynamicRequire;
    }

    var rollupDynamicRequireExports = requireRollupDynamicRequire();
    var index = /*@__PURE__*/getDefaultExportFromCjs(rollupDynamicRequireExports);

    return index;

}));

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CommonJS plugin `strictRequires` settings always hoists NodeJS conditional `require` calls from an imported UMD file #1381

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

CommonJS plugin strictRequires settings always hoists NodeJS conditional require calls from an imported UMD file #1381

Uh oh!

Uh oh!

Bloodsucker Dec 17, 2022

Replies: 2 comments

Uh oh!

Bloodsucker Jan 13, 2023 Author

Uh oh!

xlith Nov 28, 2024

CommonJS plugin `strictRequires` settings always hoists NodeJS conditional `require` calls from an imported UMD file #1381

Bloodsucker
Dec 17, 2022

Bloodsucker
Jan 13, 2023
Author

xlith
Nov 28, 2024