Microbundle: Mixed default and named exports

[pascalduez]

Hi,

I have a hard time figuring out a solution for having both a default and named export in a package. (Yes, that sounds like a bad idea, but if we could prevent a breaking change...). It's using TypeScript.

// package index.ts
function foo() {}
export { foo };
export default foo;

Get compiled into:

function e() {}
;(exports.foo = e), (exports.default = e)

Then trying to import the package in a Babel environment:

// consumer index.js
import foo from 'foo';
foo();

$ babel-node index.js --presets @babel/env

(0, foo.default)();     
TypeError: (0 , foo.default) is not a function 

So it basically lacks the interop thing:

Object.defineProperty(exports, "__esModule", {
  value: true
});

;(exports.foo = e), (exports.default = e)

[developit]

Not sure what the best solution is since Microbundle really tries to prevent this exact scenario, but you could do this:

// index.ts
import * as exports from './your-module.ts';
Object.defineProperty(exports, "__esModule", {
  value: true
});
export default exports;

[pascalduez]

@developit Thanks!

We decided to only keep a default export.

[ForsakenHarmony]

just always use named exports, default is overrated :^)

[luisherranz]

I run into this as well. I'm using the workaround proposed although I hope there's a better solution in the future!

[pascalduez]

@luisherranz Well, now it works well with Babel and node, but apparently still not with TS... :(
Will need to investigate.

[luisherranz]

@luisherranz Well, now it works well with Babel and node, but apparently still no with TS... :(
Still need to investigate.

Does it? I had to include the Object.defineProperty in the index file:
https://github.com/frontity/mobx-react-wrapper/blob/dev/src/index.js#L3-L5

[FezVrasta]

I'm sorry, I started having this problem recently (for some reason), @developit are you saying you are not willing to support mixed default and named exports with Microbundle?

With this behavior, the generated .mjs bundle and the other bundles will behave differently.

I'm having this problem with plain JS

[DaniAkash]

@developit I'm trying to use microbundle for my project Rex State and I'm unable to get both default & named exports to work currently following your workaround but this needs inbuilt support...

[ForsakenHarmony]

Do you really need a default export?

[DaniAkash]

Do you really need a default export?

I do 😅

[ForsakenHarmony]

You can just use a named export, would probably also help with auto import

[itsmichaeldiego]

Hey everyone! I am having the same issue, if I export like this:

import GoogleMap from './google_map';

export default GoogleMap;

It will build:

module.exports = GoogleMap;

However, when including named exports, it changes to:

exports.namedExport = namedExport;
...
exports.default = GoogleMap;