web icon indicating copy to clipboard operation
web copied to clipboard

Named import from CommonJS module is broken

Open Soul-Master opened this issue 2 years ago • 11 comments

I have the following module as entry point to import enum variable from commonJS module.

index.js module

import commonExport from './common.js';
import { NetworkTypes } from './common.js';

console.info('default import NetworkTypes', commonExport.NetworkTypes);
console.info('Named import', NetworkTypes);

common.js module

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SingOnMethod = exports.NetworkTypes = void 0;

var SingOnMethod;
(function (SingOnMethod) {
    SingOnMethod["Iframe"] = "iframe";
    SingOnMethod["Popup"] = "popup";
    SingOnMethod["Tab"] = "tab";
})(SingOnMethod = exports.SingOnMethod || (exports.SingOnMethod = {}));
var NetworkTypes;
(function (NetworkTypes) {
    NetworkTypes["Public"] = "public";
    NetworkTypes["Private"] = "private";
})(NetworkTypes = exports.NetworkTypes || (exports.NetworkTypes = {}));

@web/dev-server result

There is no "NetworkTypes" export name in "common.js" module.

import commonExport from './common.js';
import { NetworkTypes } from './common.js';

console.info('default import NetworkTypes', commonExport.NetworkTypes);
console.info('Named import', NetworkTypes);

common.js module

export default /*@__PURE__*/commonjsHelpers.getDefaultExportFromCjs(common);
export { common as __moduleExports };

Rollup.js result

It works fine on Rollup.js because named import is changed while generating chunk process.

import commonExport from './common.js';
import { __exports as common } from './_virtual/common.js';

console.info('default import NetworkTypes', commonExport.NetworkTypes);
console.info('Named import', common.NetworkTypes);

Demo Repository https://github.com/Soul-Master/web-dev-server-2386

Online Demo https://stackblitz.com/edit/stackblitz-starters-athhpx?file=index.js

Soul-Master avatar Jul 15 '23 10:07 Soul-Master

Hey @Soul-Master; I'm looking at this right now and I'm not sure what we can do here 🤔 I guess this is happening because we don't transform the index.js. A pretty easy workaround is to just import the default and destructure the default to NetworkTypes.

diff --git a/index.js b/index.js
index 82ab6cb..00470ff 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,6 @@
 import commonExport from './common.js';
-import { NetworkTypes } from './common.js';
+
+const { NetworkTypes } = commonExport;
 
 console.info('default import NetworkTypes', commonExport.NetworkTypes);
 console.info('Named import', NetworkTypes);
\ No newline at end of file

koddsson avatar Aug 20 '23 11:08 koddsson

@koddsson

This kind of logic is own by another team and it's used inside npm package. I cannot modify any code.

Soul-Master avatar Oct 03 '23 04:10 Soul-Master