Named exports get imported using a default import (which doesn't work)

[nachoaIvarez]

Take a look at this scenario

// a.js
exports.x = 'x';
exports.y = 'y';

// b.js
var a = require('./a.js');

console.log(a.x);
console.log(a.y);

// > x
// > y

✅ Works

Gets transpiled to:

// a.js
export var x = 'x';
export var y = 'y';

// b.js
import a from './a';

console.log(a.x);
console.log(a.y);

// > export 'default' (imported as 'a') was not found in './a'

❌ Nope.

In order to solve this you need a manual change, so:

// b.js
import { x, y } from './a';

console.log(x);
console.log(y);

// > x
// > y

✅ There we go. But again, this is a manual change.

Once I solved all those kind of issues, all the rest of safe transforms worked like a charm 👍.

I know, in order to figure out this kind of scenarios, lebab should do a lot of extra heavy lifting and run checks of usage across files. This issue is not a feature request. Just pointing out that commonjs is not that safe, specially when using it through --replace. Thoughts?

[nene]

Yeah, I agree.

I wrote the transform originally when I was just starting out using ES6 modules and I didn't really understand some of the crucial differences. Haven't really touched it much since.

So yeah, I agree it deserves to be moved into unsafe category.

[nene]

Done.

Digging into this I realized there are several other issues with commonjs transform that should have categorized it as unsafe.

[alexewerlof]

@nene thank you for Lebab.

I hit this wall too soon. What if

// a.js
exports.x = 'x';
exports.y = 'y';

gets transferred to:

export var __lebabModuleExports = {};
export __lebabModuleExports.x = 'x';
export __lebabModuleExports.y = 'y';

[nene]

While that would be doable, it results in code that has an obviously auto-generated look. But the goal of Lebab is to produce human-readable ES6 code.

I think the better fix for this is actually on the import side. Instead of doing:

import a from './a';

You would simply need to:

import * as a from './a';

The tricky bit is for Lebab to decide which form of import it should use. Lebab would need to know whether the imported file uses default export or named exports. Currently though there are technical limitations to be overcome for implementing this as the commonjs transform only "sees" one file at a time.