CODEWITHSUNDEEP
javascriptecmascript-6
Tim Scott
Tim Scott

Reputation: 15205

export default vs module.exports differences

This works:

import {bar} from './foo';
bar();

// foo.js
module.exports = {
 bar() {}
}

And this works:

import foo from './foo';
foo.bar();

// foo.js
export default {
 bar() {}
}

So why doesn't this work?

import {bar} from './foo';
bar();

// foo.js
export default {
 bar() {}
}

It throws TypeError: (0 , _foo.bar) is not a function.

Upvotes: 40

Views: 45429

Answers (3)

R...
R...

Reputation: 2570

curly bracket imports {} are only for named exports. for default export you are not expected to use them during import. if you want still use {} for your 3rd case this should work.

import {default as bar } from './foo';
bar();

// foo.js
export default {
  bar() {}
}

Upvotes: 1

Razvan Alex
Razvan Alex

Reputation: 1802

Of course is not working, you exported foo default and imported it with curly braces {}. To keep it simple remember this, if you're exporting the default way you need no curly braces, but if you're importing normaly an module, you'll use curly braces {} to acces a specific function in the module ;). You can see examples here

Upvotes: -5

Nelson Yeung
Nelson Yeung

Reputation: 3382

When you have

export default {
  bar() {}
}

The actual object exported is of the following form:

exports: {
  default: {
    bar() {}
  }
}

When you do a simple import (e.g., import foo from './foo';) you are actually getting the default object inside the import (i.e., exports.default). This will become apparent when you run babel to compile to ES5.

When you try to import a specific function (e.g., import { bar } from './foo';), as per your case, you are actually trying to get exports.bar instead of exports.default.bar. Hence why the bar function is undefined.

When you have just multiple exports:

export function foo() {};
export function bar() {};

You will end up having this object:

exports: {
  foo() {},
  bar() {}
}

And thus import { bar } from './foo'; will work. This is the similar case with module.exports you are essentially storing an exports object as above. Hence you can import the bar function.

I hope this is clear enough.

Upvotes: 98

Related Questions