# Importing Orbit Controls

**URL:** <https://discourse.threejs.org/t/importing-orbit-controls/33131>\
**Category:** Questions\
**Tags:** orbit-controls\
**Created:** [December 30, 2021, 12:05am UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131 "2021-12-30T00:05:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ishu1999](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ishu1999/32/25441_2.png) [@ishu1999](https://discourse.threejs.org/u/ishu1999)\
**Post date:** [December 30, 2021, 12:05am UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131/1 "2021-12-30T00:05:15Z")

</div>

Hi there I am trying to import Orbit controls from my node modules but it is giving the error provided in 2nd image.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6fe392bcd4cb7b07da3dfcf8293cfa9325df0d2.png)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/7/779b9a6e7adbe97e1a38d2b10fa60689fd959d8e.png)

Thank you 😃

---

<div class="post-metadata">

**Author:** ![MixTeR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mixter/32/26747_2.png) [@MixTeR](https://discourse.threejs.org/u/MixTeR)\
**Post date:** [December 30, 2021, 1:07am UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131/2 "2021-12-30T01:07:35Z")

</div>

This who I have my imports

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

```

check if the OrbitControls file is in your node modules folder first. if not try

```javascript
npm install three-orbitcontrols

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 30, 2021, 11:09am UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131/3 "2021-12-30T11:09:44Z")

</div>

you can’t import from node\_modules, that folder does not exist in production or from the bundlers perspective. the whole point of it is that when you import something, say “three”, it resolves it according to your local node\_modules folder and then includes that bit in your bundle.

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [December 30, 2021, 6:10pm UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131/4 "2021-12-30T18:10:11Z")

</div>

also you are missing the “.js” extension on the import

---

<div class="post-metadata">

**Author:** ![ishu1999](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ishu1999/32/25441_2.png) [@ishu1999](https://discourse.threejs.org/u/ishu1999)\
**Post date:** [December 30, 2021, 9:44pm UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131/5 "2021-12-30T21:44:36Z")

</div>

I am pretty sure this is the right solution but for some reason simply importing after npm install \<\> does not seem to work. It might be probably because I did not set things up right from the start.

---

<div class="post-metadata">

**Author:** ![ishu1999](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ishu1999/32/25441_2.png) [@ishu1999](https://discourse.threejs.org/u/ishu1999)\
**Post date:** [December 30, 2021, 9:45pm UTC](https://discourse.threejs.org/t/importing-orbit-controls/33131/6 "2021-12-30T21:45:49Z")

</div>

adding the .js extension worked. Thank you, everyone 😃