Why cannot export function inside default object

Question

I'm wondering why this is not valid on an application created using create-react-app:

/***** myLib.js *****/
const multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

Nor:

/***** myLib.js *****/
let multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

Neither:

/***** myLib.js *****/
function multiplyByTwo(val) { return val * 2; };

export default { multiplyByTwo };

Then, in another file:

/***** main.js *****/
import { multiplyByTwo } from './myLib'

console.log(multiplyByTwo(10));

When I try to compile it, I get this error:

Failed to compile.

./src/main.js
Attempted import error: 'multiplyByTwo' is not exported from './myLib'

However, this is valid:

/***** myLib.js *****/
export const multiplyByTwo = val => val * 2;

Also this:

/***** myLib.js *****/
export let multiplyByTwo = val => val * 2;

in case of let multiplyByTwo = val => val * 2; export default { multiplyByTwo }; you should import it like import helper from './myLib' and use it like helper.multiplyByTwo(3) — Saad Mehmood
– Saad Mehmood, Commented Jan 14, 2019 at 5:04

CertainPerformance · Accepted Answer · 2019-01-14 04:59:06Z

The difference is between named exports and the default export.

When you use export default <expression>, that expression becomes available for importing elsewhere when you use import exprName from .... The module is exporting expression as the default export, and import exprName takes the default export of that module and puts it into exprName. But the syntax import { exprName } is something entirely different; that syntax indicates that you want to extract the named export of name exprName from the module. It's not destructuring, even though it looks a lot like it.

Your myLib.js does not have a named export of multiplyByTwo (it only has a default export of an object, which has a property named multiplyByTwo), so

import { multiplyByTwo } from './myLib'

fails.

It would make the most sense to use a named export instead from myLib:

export const multiplyByTwo = val => val * 2;

and then it can be imported with the import { multiplyByTwo } syntax you're using elsewhere.

Another option, using the same code in your original myLib, would be to import the default exported object, and then destructure it after importing:

import myLib from './myLib';
const { multiplyByTwo } = myLib;

But that looks a bit odd.

SakoBu · Accepted Answer · 2019-01-14 05:02:01Z

1

You're talking about the difference between a default export and a named export:

Let say you have an App.js and if you do something like

export default () => {
  // do something
}

That's a default export and 'limited' to a single import like so

import App from './App'

A named export would be something like:

export const add = (a, b) => a + b;

That's a named export and yo import it with the curly braces like so:

import { app } from './app'

More info here

answered Jan 14, 2019 at 5:02

SakoBu

4,0311 gold badge18 silver badges35 bronze badges

Comments

Praveen Rao Chavan.G · Accepted Answer · 2019-01-14 05:24:59Z

Using default while exporting is when you would like to export something by default, which means when some other file is importing this they don't need to specify a particular name to import, this is called Default Export.

Example:

import React from 'react';

In this case, we don't specify a particular intended name when importing, here React can also be reactDefaultExport this name is a user-defined name.

Coming to Named Exports, when you want to export something specific, which needs to be imported with the exact name, then we use names exports.

Example:

import React,{Component} from 'react';

In this Component is a named export, when we use a functional/ stateless components we don't need Component, so we can avoid importing it, but React is a Default export.

Collectives™ on Stack Overflow

Why cannot export function inside default object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related