Using code from CJS module in ES6 module will try to access non-existing default property

[Deraen]

Found a problem with React-leaflet (which is written in ES6) which uses prop-types (CommonJS). The code converted from ES6 module, tries to access default property in the converted CommonJS module, which will fail, as CommonJS module doesn't export default property:

❯ cat default-problem.js  
import Foo from './foo';

Foo.oneOfType();

❯ cat foo.js              
module.exports = {
  oneOfType: function() {
    return true;
  }
};

❯ java -jar target/closure-compiler-1.0-SNAPSHOT.jar --js foo.js default-problem.js  --process_common_js_modules --module_resolution NODE

var module$foo={oneOfType:function(){return!0}};
var module$default_problem={};
module$foo.default.oneOfType();
//          ^
//          Problem, should bee just module$foo.oneOfType

[blickly]

In ES6 modules,

import Foo from './foo';

is just syntactic sugar for

import {default as Foo} from './foo';

so unless I'm misunderstanding, I think this example is WAI

[ChadKillingsworth]

@blickly So the problem here is that other transpilers add a special property definition to ES6 modules so that import Foo from './foo'; is actually import * as Foo from './foo' when './foo' is a common js module.

I neither agree with this nor encourage it, but it is very common.

[blickly]

I thought TypeScript had a special non-JS syntax for this pattern that was something like

import Foo = require('./foo');

to not avoid changing the meaning of native ES6 syntax, but still have some way of importing the entire "bag". But I'm not as familiar with the other transpilers.

[ChadKillingsworth]

Well in the case above, it would be fixed with:

import * as Foo from './foo';

That gives you the export object directly.

[blickly]

Good point

[Deraen]

This use is encouraged by prop-types readme, so I think this might quite common in React libs written in ES6 and using prop-types: https://github.com/facebook/prop-types#importing

[Deraen]

And so does React guide: https://facebook.github.io/react/docs/installation.html#hello-world-with-es6-and-jsx (React is CommonJS module also)

[ChadKillingsworth]

I don't know that this can be solved by Closure-compiler. It's highly dependent on the way Babel decided to transpile modules and requires knowing what type of module you are importing.

Closure-compiler rewrites a module in isolation. One file at a time.

[Deraen]

Could this issue be opened to keep track of how common this problem is? And to keep track of possible fixex, if such can be found later.

[ChadKillingsworth]

I guess I would be ok with injecting:

module.exports.default = module.exports;

That would support interop. It's not technically correct, but I feel like this is a losing battle.

[blickly]

Sounds reasonable to me.