62

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.

S. Hesam
  • 5,266
  • 3
  • 37
  • 59
Nani
  • 731
  • 1
  • 6
  • 6
  • 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. – GJK Dec 14 '15 at 23:28
  • Sorry to mention i am using browserify as the module bundler – Nani Dec 15 '15 at 02:57

3 Answers3

72

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.

Matt Molnar
  • 2,412
  • 3
  • 22
  • 28
48

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.

jmarceli
  • 19,102
  • 6
  • 69
  • 67
  • 5
    The `import * as Tiger from './animals'` work for me ! Thank you – Dessauges Antoine May 15 '18 at 08:42
  • 2
    `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';`. – Slava Fomin II Nov 12 '19 at 15:32
20

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';
Daniel Rodrigues
  • 329
  • 2
  • 4