1

I have a question about ES6 import module.

I tried to add OrbitControls in my Three.js Code. Since OrbitControls is a separate module, I needed to import them individually in my code as below. and it's working fine.

import OrbitControls from 'three-orbitcontrols'

However,

What I first expected was

import {OrbitControls} from 'three-orbitcontrols'

The reason is,
As far as I understood, if the module export something as export default,
I can access them by putting curly bracketing in my 'import' code.
But,it didn't workout so I assumed that 'three-orbitcontrols' doesn't export "OrbitControls" as a default.

Then I tried like this

import * as Orbit from 'three-orbitcontrols'

new Orbit.OrbitControls(a,b)

However,it didn't work out either.

What did I misunderstand?

BS100
  • 823
  • 6
  • 22

1 Answers1

3

Curly brackets are used when importing to import a named export from the other file. For example, the following link up:

export const foo = 'something';

import { foo } from './somefile.js';

Default exports do not use curly brackets:

export default 'somethingelse';

import theSomethingElse from './someOtherFile.js';

It sounds like OrbitControls uses default exports, so you should avoid curly brackets when importing.

Doing

import * as Orbit from 'three-orbitcontrols'

imports everything the module exports as a namespace, which is essentially an object. To access the default export from a namespace, access the default property on it:

import * as Orbit from 'three-orbitcontrols'

new Orbit.default(a,b)

(or just use your original version: import OrbitControls from 'three-orbitcontrols')

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320