Always render and use a dynamic namespace when a module with syntheti…

…c named exports is imported dynamically (#3648)

src/Chunk.ts

@@ -215,6 +215,11 @@ export default class Chunk {
 			for (const importer of module.includedDynamicImporters) {
 				if (!chunkModules.has(importer)) {
 					this.dynamicEntryModules.push(module);
+					// Modules with synthetic exports need an artifical namespace for dynamic imports
+					if (module.syntheticNamedExports) {
+						module.namespace.include();
+						this.exports.add(module.namespace);
+					}
 				}
 			}
 			if (module.implicitlyLoadedAfter.size > 0) {
@@ -347,6 +352,7 @@ export default class Chunk {
 			}
 		}
 		for (const module of this.dynamicEntryModules) {
+			if (module.syntheticNamedExports) continue;
 			if (!this.facadeModule && this.canModuleBeFacade(module, exposedVariables)) {
 				this.facadeModule = module;
 				this.facadeChunkByModule.set(module, this);

src/Module.ts

@@ -295,7 +295,9 @@ export default class Module {
 			return error({
 				code: Errors.SYNTHETIC_NAMED_EXPORTS_NEED_DEFAULT,
 				id: this.id,
-				message: `Modules with 'syntheticNamedExports' need a default export.`
+				message: `Module "${relativeId(
+					this.id
+				)}" that is marked to have "syntheticNamedExports" needs a default export.`
 			});
 		}
 		return this.defaultExport;

src/ast/nodes/ImportExpression.ts

@@ -73,7 +73,7 @@ export default class Import extends NodeBase {
 		if (namespaceExportName) {
 			const _ = options.compact ? '' : ' ';
 			const s = options.compact ? '' : ';';
-			code.appendLeft(
+			code.prependLeft(
 				this.end,
 				`.then(function${_}(n)${_}{${_}return n.${namespaceExportName}${s}${_}})`
 			);

test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/amd/generated-component.js

@@ -0,0 +1,11 @@
+define(['exports', './generated-main'], function (exports, main) { 'use strict';
+
+	var component = { lib: main.lib, lib2: main.lib.named, lib3: main.lib.named.named };
+
+	var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+		'default': component
+	}));
+
+	exports.component = component$1;
+
+});

test/chunking-form/samples/synthetic-named-exports-chained-default-reexport/_expected/amd/generated-main.js → test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/amd/generated-main.js

@@ -6,7 +6,7 @@ define(['require', 'exports'], function (require, exports) { 'use strict';
 
 	console.log('side-effect', lib.named.named);
 
-	const component = new Promise(function (resolve, reject) { require(['./generated-component'], resolve, reject) });
+	const component = new Promise(function (resolve, reject) { require(['./generated-component'], resolve, reject) }).then(function (n) { return n.component; });
 
 	exports.component = component;
 	exports.lib = lib;

test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/cjs/generated-component.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var main = require('./generated-main.js');
+
+var component = { lib: main.lib, lib2: main.lib.named, lib3: main.lib.named.named };
+
+var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+	'default': component
+}));
+
+exports.component = component$1;

test/chunking-form/samples/synthetic-named-exports-chained-default-reexport/_expected/cjs/generated-main.js → test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/cjs/generated-main.js

@@ -6,7 +6,7 @@ console.log('side-effect', lib.named);
 
 console.log('side-effect', lib.named.named);
 
-const component = Promise.resolve().then(function () { return require('./generated-component.js'); });
+const component = Promise.resolve().then(function () { return require('./generated-component.js'); }).then(function (n) { return n.component; });
 
 exports.component = component;
 exports.lib = lib;

test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/es/generated-component.js

@@ -0,0 +1,9 @@
+import { l as lib } from './generated-main.js';
+
+var component = { lib, lib2: lib.named, lib3: lib.named.named };
+
+var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+	'default': component
+}));
+
+export { component$1 as c };

test/chunking-form/samples/synthetic-named-exports-chained-default-reexport/_expected/es/generated-main.js → test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/es/generated-main.js

@@ -4,6 +4,6 @@ console.log('side-effect', lib.named);
 
 console.log('side-effect', lib.named.named);
 
-const component = import('./generated-component.js');
+const component = import('./generated-component.js').then(function (n) { return n.c; });
 
 export { component as c, lib as l };

test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/system/generated-component.js

@@ -0,0 +1,19 @@
+System.register(['./generated-main.js'], function (exports) {
+	'use strict';
+	var lib;
+	return {
+		setters: [function (module) {
+			lib = module.l;
+		}],
+		execute: function () {
+
+			var component = { lib, lib2: lib.named, lib3: lib.named.named };
+
+			var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+				'default': component
+			}));
+			exports('c', component$1);
+
+		}
+	};
+});

test/chunking-form/samples/synthetic-named-exports-chained-default-reexport/_expected/system/generated-main.js → test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/_expected/system/generated-main.js

@@ -9,7 +9,7 @@ System.register([], function (exports, module) {
 
 			console.log('side-effect', lib.named.named);
 
-			const component = exports('c', module.import('./generated-component.js'));
+			const component = exports('c', module.import('./generated-component.js').then(function (n) { return n.c; }));
 
 		}
 	};

test/chunking-form/samples/synthetic-named-exports-chained-default-reexport/component.js → test/chunking-form/samples/synthetic-named-exports/chained-default-reexport/component.js

@@ -1,4 +1,4 @@
 import lib from './lib';
 import lib2 from './lib-reexport2';
 import lib3 from './lib-reexport';
-console.log(lib, lib2, lib3);
+export default { lib, lib2, lib3 };

test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/amd/generated-component.js

@@ -0,0 +1,11 @@
+define(['exports', './main'], function (exports, main) { 'use strict';
+
+	var component = { lib: main.lib, someExport: main.lib.someExport };
+
+	var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+		'default': component
+	}));
+
+	exports.component = component$1;
+
+});

test/chunking-form/samples/synthetic-named-exports-default-reexport/_expected/amd/main.js → test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/amd/main.js

@@ -4,7 +4,7 @@ define(['require', 'exports'], function (require, exports) { 'use strict';
 
 	console.log('side-effect', lib);
 
-	const component = new Promise(function (resolve, reject) { require(['./generated-component'], resolve, reject) });
+	const component = new Promise(function (resolve, reject) { require(['./generated-component'], resolve, reject) }).then(function (n) { return n.component; });
 
 	exports.component = component;
 	exports.lib = lib;

test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/cjs/generated-component.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var main = require('./main.js');
+
+var component = { lib: main.lib, someExport: main.lib.someExport };
+
+var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+	'default': component
+}));
+
+exports.component = component$1;

test/chunking-form/samples/synthetic-named-exports-default-reexport/_expected/cjs/main.js → test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/cjs/main.js

@@ -6,7 +6,7 @@ var lib = {};
 
 console.log('side-effect', lib);
 
-const component = Promise.resolve().then(function () { return require('./generated-component.js'); });
+const component = Promise.resolve().then(function () { return require('./generated-component.js'); }).then(function (n) { return n.component; });
 
 exports.component = component;
 exports.lib = lib;

test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/es/generated-component.js

@@ -0,0 +1,9 @@
+import { lib } from './main.js';
+
+var component = { lib, someExport: lib.someExport };
+
+var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+	'default': component
+}));
+
+export { component$1 as c };

test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/es/main.js

@@ -0,0 +1,7 @@
+var lib = {};
+
+console.log('side-effect', lib);
+
+const component = import('./generated-component.js').then(function (n) { return n.c; });
+
+export { component, lib };

test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/system/generated-component.js

@@ -0,0 +1,19 @@
+System.register(['./main.js'], function (exports) {
+	'use strict';
+	var lib;
+	return {
+		setters: [function (module) {
+			lib = module.lib;
+		}],
+		execute: function () {
+
+			var component = { lib, someExport: lib.someExport };
+
+			var component$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), component, {
+				'default': component
+			}));
+			exports('c', component$1);
+
+		}
+	};
+});

test/chunking-form/samples/synthetic-named-exports-default-reexport/_expected/system/main.js → test/chunking-form/samples/synthetic-named-exports/default-reexport/_expected/system/main.js

@@ -7,7 +7,7 @@ System.register([], function (exports, module) {
 
 			console.log('side-effect', lib);
 
-			const component = exports('component', module.import('./generated-component.js'));
+			const component = exports('component', module.import('./generated-component.js').then(function (n) { return n.c; }));
 
 		}
 	};

test/chunking-form/samples/synthetic-named-exports-default-reexport/component.js → test/chunking-form/samples/synthetic-named-exports/default-reexport/component.js

@@ -1,2 +1,2 @@
 import lib, { someExport } from './lib-reexport';
-console.log(lib, someExport);
+export default { lib, someExport };

test/chunking-form/samples/synthetic-named-exports/dynamic-import/_config.js

@@ -0,0 +1,15 @@
+module.exports = {
+	description: 'synthetic named exports',
+	options: {
+		input: ['main.js'],
+		plugins: [
+			{
+				transform(code, id) {
+					if (id.endsWith('dep.js')) {
+						return { code, syntheticNamedExports: true };
+					}
+				}
+			}
+		]
+	}
+};

test/chunking-form/samples/synthetic-named-exports/dynamic-import/_expected/amd/generated-dep.js

@@ -0,0 +1,13 @@
+define(['exports'], function (exports) { 'use strict';
+
+	var dep = { foo: 1 };
+	const bar = 2;
+
+	var dep$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), dep, {
+		'default': dep,
+		bar: bar
+	}));
+
+	exports.dep = dep$1;
+
+});

test/chunking-form/samples/synthetic-named-exports/dynamic-import/_expected/amd/main.js

@@ -0,0 +1,5 @@
+define(['require'], function (require) { 'use strict';
+
+	new Promise(function (resolve, reject) { require(['./generated-dep'], resolve, reject) }).then(function (n) { return n.dep; }).then(({ foo, bar, baz }) => console.log(foo, bar, baz));
+
+});

test/chunking-form/samples/synthetic-named-exports/dynamic-import/_expected/cjs/generated-dep.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var dep = { foo: 1 };
+const bar = 2;
+
+var dep$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.assign(/*#__PURE__*/Object.create(null), dep, {
+	'default': dep,
+	bar: bar
+}));
+
+exports.dep = dep$1;

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

@@ -0,0 +1,3 @@
+'use strict';
+
+Promise.resolve().then(function () { return require('./generated-dep.js'); }).then(function (n) { return n.dep; }).then(({ foo, bar, baz }) => console.log(foo, bar, baz));