Why does pulling a variable sometimes return undefined when doing import in javascript?

Question

This works

import config from './setup/config'
const {port} = config;

This gives port as undefined

import config, {port} from './setup/config'
// config.port returns a number but port alone is undefined

This is also undefined

import {port} from './setup/config'

You should read [When should I use curly braces for ES6 import?](https://stackoverflow.com/q/36795819/218196) — Felix Kling, Oct 20 '17 at 18:07
those two things are completely different. One is syntax for import one for destructuring. — ASDFGerte, Oct 20 '17 at 18:07

score 2 · Accepted Answer · answered Oct 20 '17 at 18:09

const {port} = config;

is a destructuring assignment. It "pulls" out the port property from the object in config.

import {port} from './setup/config'

imports the named export port from the module ./setup/config.

Your module probably doesn't have a named export port. Properties of an object that is exported as default export do not magically become named exports!

Make yourself more familiar with ES6 modules by reading

Why does pulling a variable sometimes return undefined when doing import in javascript?

1 Answers1