Why can't I import properties by brace from a javascript file?

Question

I defined a javascript file as below:

export default {
  parseOptions: {
    tolerant: true,
    raw: true,
    tokens: true,
    range: true,
    comment: true,
  },
  syntaxType: {
    callback: 'callback',
    promise: 'promise',
    await: 'await',
  },
};

I use below code to import it in other files:

import { syntaxType } from './options';
...
synaxType.callback

I get an error that synaxType is not defined when I use it. However if I change to below code it will work fine:

import options from './options';
options.synaxType.callback

I wonder what wrong with my previous import. Do I need to configure anything for that? Below is my babel configuration:

{
  "presets": [
    ["es2015"],
    "stage-0",
    "react",
    "react-boilerplate"
  ],

  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-async-to-generator",
    "react-hot-loader/babel"
  ]
}

`synaxType` is not the same as `syntaxType` – Keith Sep 07 '17 at 00:47 — Keith, Sep 07 '17 at 00:47

A. L · Answer 1 · 2017-09-07T00:50:19.777

2

Because that's how the default works, you don't actually need to assign a name to it. If you want to use curly braces, you must set up up without the default like:

export var options = {
  parseOptions: {
    tolerant: true,
    raw: true,
    tokens: true,
    range: true,
    comment: true,
  },
  syntaxType: {
    callback: 'callback',
    promise: 'promise',
    await: 'await',
  },
};

Then you can

import { options } from './options';
options.syntaxType

Or

export var syntaxType = {
  callback: 'callback',
  promise: 'promise',
  await: 'await',
}

edited Sep 07 '17 at 00:50

answered Sep 07 '17 at 00:45

A. L

11,695
23
85
163

1

You're right about `default` but your code is wrong. You don't declare the var, and you're exporting the wrong object. – loganfsmyth Sep 07 '17 at 00:48
@loganfsmyth you're right, I wrote it in a hurry. I will edit it. – A. L Sep 07 '17 at 00:49

score 2 · Answer 2 · edited Sep 07 '17 at 00:48

2

The syntax

import options from './options';

Will presume options is the default exported object. That is why options.synaxType.callback works.

The syntax

import { syntaxType } from './options';

Needs syntaxType to have been an exported member, such as:

export const syntaxType = {
    callback: 'callback',
    promise: 'promise',
    await: 'await',
};

If the above construct were present at the module, then that syntax would work.

edited Sep 07 '17 at 00:48

loganfsmyth

156,129
30
331
251

answered Sep 07 '17 at 00:46

acdcjunior

132,397
37
331
304

Complete explanation and more info at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – acdcjunior Sep 07 '17 at 00:51

Govind Rai · Accepted Answer · 2017-09-07T02:39:22.653

There are two types of exports, default exports and named exports. Default exports don't require a name, whereas named exports do.

Here's how to export a default value

export default "apple";

Here's how to import a default value

import iCanNameThisWhateverSinceItsADefaultExport from "./apple_module";

Here's how to export a named value

export const apple = "apple";

Here's how to import a named value

export {apple} from "./apple_module";

If you want to have named access to syntaxType, you have two options:

If you leave it how it is, you simply need to change your import statement to:

import options from "./options";
const {syntaxType, parseOptions} = options;
// or access properties normally via (i.e.) options.syntaxType

Or you can make syntaxType and parseOptions named exports:

export const parseOptions = {
    tolerant: true,
    raw: true,
    tokens: true,
    range: true,
    comment: true,
  };

export const syntaxType = {
    callback: 'callback',
    promise: 'promise',
    await: 'await',
  };

And import them with

import {syntaxType, parseOptions} from "options";

It's simply a syntax issue. Once you understand the syntax, you'll should be good to go with imports/exports. Read all about import and export statements in the excellent MDN docs.

Don't forget `import {apple as iCanNameThisWhateverIWantSinceItsAnAliasedNamedExport} …` :-) — Bergi, Sep 07 '17 at 02:21

Why can't I import properties by brace from a javascript file?

3 Answers3