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.

Menorca

Have you looked at the Babel output? Looking at the transpiled source of Tiger.js will tell you immediately why it's not working. Long story short: stick with one module system or use a module bundler like webpack that will take care of inconsistencies. – Termor

Sorry to mention i am using browserify as the module bundler – Menorca

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.

Slapjack

so what would the correct import statement be here? would it just be import Tiger from './animals'? – Factorial

I believe so, assuming you didn't want to change tiger.js – Slapjack

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.

Carswell

The import * as Tiger from './animals' work for me ! Thank you – Passable

Tiger is a function in the example above. You can't import callable (function or class) using import * as something, because something will be representing a namespace object, which is not callable. The correct import for this case would be the default import: import Tiger from './animals';. – Numerous

Answer 3

When module.exports is not set it points to an empty object ({}). When you do module.exports = Tiger, you are telling the runtime the object being exported from that module is the Tiger object (instead of the default {}), which in this case is a function.
Since you want to import that same function, the way to import is using the default import (import tiger from './tiger'). Otherwise, if you want to use named import (import { tiger } from './tiger') you must change the module.exports object or use export keyword instead of module.exports object.

Default import/export:

// tiger.js
module.exports = tiger;
// or
export default function tiger() { ... }

// animal.js
import tiger from './tiger';

Named import/export:

// tiger.js
module.exports = { tiger };
// or
module.exports.tiger = tiger
// or
export const tiger = () => { ... }
// or
export function tiger() => { ... }

// animal.js
import { tiger } from './tiger';

Pulsar

add some explanation to your answer – Heliotropin

Yeah, my bad. My answer was just to add some more solutions besides what was already explained. – Pulsar

Good and self explanatory examples. Thanks a lot for making it easy to understand – Cosimo