Module.exports and es6 Import

Question

React with babel. I have this confusion with imports and module.exports. I assume babel when converting the ES6 code to ES5 converts the imports and exports to require and module.exports respectively.

If I export a function from one module and import the function in another module, the code executes fine. But if I export the function with module.exports and import using "import" the error is thrown at runtime saying it is not a function.

I cooked up an example.

// Tiger.js function Tiger() {     function roar(terrian){         console.log('Hey i am in ' +  terrian + ' and i am roaing');     };     return roar; }  module.exports = Tiger;  // animal.js import { Tiger } from './animals';  var animal = Tiger(); animal("jungle"); 

I used babel with preset es2015 to transcompile it. This gives me the following error

Uncaught TypeError: (0 , _animals.Tiger) is not a function

But if I remove the module.exports = Tiger; And replace it with export { Tiger }; It works fine.

What am I missing here??

EDIT: I am using browserify as the module bundler.

Answer 1

export { Tiger } would be equivalent to module.exports.Tiger = Tiger.

Conversely, module.exports = Tiger would be equivalent to export default Tiger.

So when you use module.exports = Tiger and then attempt import { Tiger } from './animals' you're effectively asking for Tiger.Tiger.

Answer 2

If you would like to import:

module.exports = Tiger 

you may use following construction:

import * as Tiger from './animals' 

Then it will work.

Another option is changing the export as described by @Matt Molnar but it is only possible if you are the author of the imported code.