[v3.0] Keep dynamic imports in CommonJS output

cli/help.md

@@ -29,6 +29,7 @@ Basic options:
 --chunkFileNames <pattern>  Name pattern for emitted secondary chunks
 --compact                   Minify wrapper code
 --context <variable>        Specify top-level `this` value
+--no-dynamicImportInCjs     Write external dynamic CommonJS imports as require
 --entryFileNames <pattern>  Name pattern for emitted entry chunks
 --environment <values>      Settings passed to config file (see example)
 --no-esModule               Do not add __esModule property

docs/01-command-line-reference.md

@@ -360,6 +360,7 @@ Many options have command line equivalents. In those cases, any arguments passed
 --chunkFileNames <pattern>  Name pattern for emitted secondary chunks
 --compact                   Minify wrapper code
 --context <variable>        Specify top-level `this` value
+--no-dynamicImportInCjs     Write external dynamic CommonJS imports as require
 --entryFileNames <pattern>  Name pattern for emitted entry chunks
 --environment <values>      Settings passed to config file (see example)
 --no-esModule               Do not add __esModule property

docs/999-big-list-of-options.md

@@ -466,6 +466,52 @@ Type: `boolean`<br> CLI: `--compact`/`--no-compact`<br> Default: `false`
 
 This will minify the wrapper code generated by rollup. Note that this does not affect code written by the user. This option is useful when bundling pre-minified code.
 
+#### output.dynamicImportInCjs
+
+Type: `boolean`<br> CLI: `--dynamicImportInCjs`/`--no-dynamicImportInCjs`<br> Default: `true`
+
+While CommonJS output originally supported only `require(…)` to import dependencies, recent Node versions also started to support `import(…)`, which is the only way to import ES modules from CommonJS files. If this option is `true`, which is the default, Rollup will keep external dynamic imports as `import(…)` expressions in CommonJS output. Set this to `false` to rewrite dynamic imports using `require(…)` syntax.
+
+```js
+// input
+import('external').then(console.log);
+
+// cjs output with dynamicImportInCjs: true or not set
+import('external').then(console.log);
+
+// cjs output with dynamicImportInCjs: false
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(
+          n,
+          k,
+          d.get
+            ? d
+            : {
+                enumerable: true,
+                get: function () {
+                  return e[k];
+                }
+              }
+        );
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+Promise.resolve()
+  .then(function () {
+    return /*#__PURE__*/ _interopNamespaceDefault(require('external'));
+  })
+  .then(console.log);
+```
+
 #### output.entryFileNames
 
 Type: `string | ((chunkInfo: ChunkInfo) => string)`<br> CLI: `--entryFileNames <pattern>`<br> Default: `"[name].js"`

src/ast/nodes/ImportExpression.ts

@@ -1,6 +1,6 @@
 import type MagicString from 'magic-string';
 import ExternalModule from '../../ExternalModule';
-import type Module from '../../Module';
+import Module from '../../Module';
 import type { GetInterop, NormalizedOutputOptions } from '../../rollup/types';
 import type { PluginDriver } from '../../utils/PluginDriver';
 import type { GenerateCodeSnippets } from '../../utils/generateCodeSnippets';
@@ -134,6 +134,7 @@ export default class ImportExpression extends NodeBase {
 		{
 			compact,
 			dynamicImportFunction,
+			dynamicImportInCjs,
 			format,
 			generatedCode: { arrowFunctions },
 			interop
@@ -156,6 +157,12 @@ export default class ImportExpression extends NodeBase {
 		const hasDynamicTarget = !this.resolution || typeof this.resolution === 'string';
 		switch (format) {
 			case 'cjs': {
+				if (
+					dynamicImportInCjs &&
+					(!resolution || typeof resolution === 'string' || resolution instanceof ExternalModule)
+				) {
+					return { helper: null, mechanism: null };
+				}
 				const helper = getInteropHelper(resolution, exportMode, interop);
 				let left = `require(`;
 				let right = `)`;

src/rollup/types.d.ts

@@ -613,6 +613,7 @@ export interface OutputOptions {
 	dir?: string;
 	/** @deprecated Use the "renderDynamicImport" plugin hook instead. */
 	dynamicImportFunction?: string;
+	dynamicImportInCjs?: boolean;
 	entryFileNames?: string | ((chunkInfo: PreRenderedChunk) => string);
 	esModule?: boolean | 'if-default-prop';
 	exports?: 'default' | 'named' | 'none' | 'auto';
@@ -663,6 +664,7 @@ export interface NormalizedOutputOptions {
 	dir: string | undefined;
 	/** @deprecated Use the "renderDynamicImport" plugin hook instead. */
 	dynamicImportFunction: string | undefined;
+	dynamicImportInCjs: boolean;
 	entryFileNames: string | ((chunkInfo: PreRenderedChunk) => string);
 	esModule: boolean | 'if-default-prop';
 	exports: 'default' | 'named' | 'none' | 'auto';

src/utils/options/mergeOptions.ts

@@ -231,6 +231,7 @@ function mergeOutputOptions(
 		compact: getOption('compact'),
 		dir: getOption('dir'),
 		dynamicImportFunction: getOption('dynamicImportFunction'),
+		dynamicImportInCjs: getOption('dynamicImportInCjs'),
 		entryFileNames: getOption('entryFileNames'),
 		esModule: getOption('esModule'),
 		exports: getOption('exports'),

src/utils/options/normalizeOutputOptions.ts

@@ -43,6 +43,7 @@ export function normalizeOutputOptions(
 		compact,
 		dir: getDir(config, file),
 		dynamicImportFunction: getDynamicImportFunction(config, inputOptions, format),
+		dynamicImportInCjs: config.dynamicImportInCjs ?? true,
 		entryFileNames: getEntryFileNames(config, unsetOptions),
 		esModule: config.esModule ?? 'if-default-prop',
 		exports: getExports(config, unsetOptions),

test/chunking-form/samples/deprecated/dynamic-import-comments/_expected/cjs/main.js

@@ -1,22 +1,5 @@
 'use strict';
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require(
+import /* () should not break */     (
 /* webpackChunkName: "chunk-name" */
-'./foo.js'/*suffix*/)); });
+'./foo.js'/*suffix*/);

test/chunking-form/samples/deprecated/dynamic-import-name/_expected/cjs/main.js

@@ -1,20 +1,3 @@
 'use strict';
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('./foo.js')); }).then(result => console.log(result));
+import('./foo.js').then(result => console.log(result));

test/chunking-form/samples/dynamic-import-dynamic/_expected/cjs/main.js

@@ -1,22 +1,5 @@
 'use strict';
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
 var dep = 'dep';
 
-(function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require(t)); }); })(dep);
+import(dep);

test/chunking-form/samples/dynamic-import-external/_expected/cjs/main.js

@@ -1,20 +1,3 @@
 'use strict';
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('./foo.js')); });
+import('./foo.js');

test/chunking-form/samples/emit-file/emit-chunk/_expected/cjs/main.js

@@ -2,23 +2,6 @@
 
 var dep = require('./generated-dep.js');
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('./ext\'ernal')); });
+import('./ext\'ernal');
 
 console.log('main', dep.value);

test/chunking-form/samples/nested-chunks/_expected/cjs/main1.js

@@ -2,24 +2,7 @@
 
 var dep = require('./generated-dep.js');
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
 console.log('main1', dep.value);
 
 Promise.resolve().then(function () { return require('./generated-dynamic.js'); }).then(result => console.log(result));
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('./external.js')); }).then(result => console.log(result));
+import('./external.js').then(result => console.log(result));

test/chunking-form/samples/nested-chunks/_expected/cjs/nested/main2.js

@@ -2,24 +2,7 @@
 
 var dep = require('../generated-dep.js');
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
 console.log('main2', dep.value);
 
 Promise.resolve().then(function () { return require('../generated-dynamic.js'); }).then(result => console.log(result));
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('../external.js')); }).then(result => console.log(result));
+import('../external.js').then(result => console.log(result));

test/chunking-form/samples/resolve-dynamic-import/_expected/cjs/main.js

@@ -5,29 +5,12 @@ require('to-indirect-relative-external');
 require('direct-absolute-external');
 require('to-indirect-absolute-external');
 
-function _interopNamespaceDefault(e) {
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return Object.freeze(n);
-}
-
 // nested
 Promise.resolve().then(function () { return existing; });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('./direct-relative-external')); });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('to-indirect-relative-external')); });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('direct-absolute-external')); });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('to-indirect-absolute-external')); });
+import('./direct-relative-external');
+import('to-indirect-relative-external');
+import('direct-absolute-external');
+import('to-indirect-absolute-external');
 
 const value = 'existing';
 console.log('existing');
@@ -39,12 +22,12 @@ var existing = /*#__PURE__*/Object.freeze({
 
 //main
 Promise.resolve().then(function () { return existing; });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('./direct-relative-external')); });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('to-indirect-relative-external')); });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('direct-absolute-external')); });
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('to-indirect-absolute-external')); });
+import('./direct-relative-external');
+import('to-indirect-relative-external');
+import('direct-absolute-external');
+import('to-indirect-absolute-external');
 
-(function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require(t)); }); })('dynamic-direct-external' + unknown);
-Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require('to-dynamic-indirect-external')); });
+import('dynamic-direct-external' + unknown);
+import('to-dynamic-indirect-external');
 Promise.resolve().then(function () { return existing; });
-(function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefault(require(t)); }); })('my' + 'replacement');
+import('my' + 'replacement');

test/form/samples/deconflict-format-specific-globals/_config.js

@@ -5,7 +5,8 @@ module.exports = {
 		output: {
 			globals: { external: 'external' },
 			name: 'bundle',
-			interop: 'auto'
+			interop: 'auto',
+			dynamicImportInCjs: false
 		}
 	}
 };

test/form/samples/dynamic-import-this-arrow/_config.js

@@ -6,7 +6,8 @@ module.exports = {
 		external: ['input', 'output'],
 		output: {
 			generatedCode: { arrowFunctions: true },
-			name: 'bundle'
+			name: 'bundle',
+			dynamicImportInCjs: false
 		}
 	}
 };

test/form/samples/dynamic-import-this-function/_config.js

@@ -6,7 +6,8 @@ module.exports = {
 		external: ['input', 'output'],
 		output: {
 			generatedCode: { arrowFunctions: false },
-			name: 'bundle'
+			name: 'bundle',
+			dynamicImportInCjs: false
 		}
 	}
 };