Named export / unnamed export

Question

I currently follow this tutorial here which uses:

import { AUTH_TOKEN } from '../constants'

While I followed the tutorial step-by-step I have to use

import AUTH_TOKEN from '../constants'

My constants.js looks like this:

export const AUTH_TOKEN = "auth-token";

I struggle to understand why my React.js app behaves the opposite.

`import AUTH_TOKEN from` is for default exports. `export const AUTH_TOKEN` isnt a default export, so `import { AUTH_TOKEN } from` has te be used. — Caramiriel, Feb 14 '20 at 12:51
Does this answer your question? [When should I use curly braces for ES6 import?](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import) — Caramiriel, Feb 14 '20 at 12:51

score 0 · Answer 1 · answered Feb 14 '20 at 13:02

import { AUTH_TOKEN } from '../constants'    
export const AUTH_TOKEN = "auth-token";

this means that there are more than one to export.. but if you changed the code like this:

export default const AUTH_TOKEN = "auth-token";

so you can make your import like this:

import AUTH_TOKEN from '../constants'

Zain Ul Abideen · Answer 2 · 2020-02-14T13:20:18.547

Following is called named import and named export

import { AUTH_TOKEN } from '../constants' // importing in file A
export const AUTH_TOKEN = "tokenValue"    // exporting from file B

In above method you use {} and same name for import and export

import  MY_AUTH_TOKEN  from '../constants' // importing in file A
export default const AUTH_TOKEN = "tokenValue" exporting from file B

In above method you do not use {} and name does not matter.

Find the good read for understanding the concept further.

2 Answers2