# Cannot import example files in Nuxt.js / Vue.js

**URL:** <https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463>\
**Category:** Questions\
**Tags:** vue, modules\
**Created:** [July 11, 2019, 5:06am UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463 "2019-07-11T05:06:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ksuhara](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@ksuhara](https://discourse.threejs.org/u/ksuhara)\
**Post date:** [July 11, 2019, 5:06am UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/1 "2019-07-11T05:06:23Z")

</div>

I followed the official document, and "import \* as THREE from ‘three’ " works fine, but not the example file. Is there anything that I am missing?

### Error

```auto
SyntaxError
Unexpected token {

```

### Source Code

```javascript
<template>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"

export default{
}
</script>

```

### Versions

nuxt 2.0.0  
three 0.106.2

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 11, 2019, 10:09am UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/2 "2019-07-11T10:09:38Z")

</div>

Are you sure the syntax error comes from the imports? Does it work if you remove your `export default` statement?

---

<div class="post-metadata">

**Author:** ![ksuhara](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@ksuhara](https://discourse.threejs.org/u/ksuhara)\
**Post date:** [July 11, 2019, 12:06pm UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/3 "2019-07-11T12:06:13Z")

</div>

It doesn’t work even if I remove export default statement

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 11, 2019, 1:08pm UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/4 "2019-07-11T13:08:34Z")

</div>

Can you please demonstrate the issue with a [live example](https://jsfiddle.net/f2Lommf5/)? Otherwise consider to share your code as a github repository.

---

<div class="post-metadata">

**Author:** ![Steven\_Sanborn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/steven_sanborn/32/2733_2.png) [@Steven\_Sanborn](https://discourse.threejs.org/u/Steven_Sanborn)\
**Post date:** [July 12, 2019, 9:23pm UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/5 "2019-07-12T21:23:15Z")

</div>

I import three just fine in vue, just as you have it. That does not necessarily show an issue with import. I would try and remove the import and see if that compiles. Or import another lib.

Templates i thought needed a root element.

---

<div class="post-metadata">

**Author:** ![ksuhara](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@ksuhara](https://discourse.threejs.org/u/ksuhara)\
**Post date:** [July 14, 2019, 2:02am UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/6 "2019-07-14T02:02:14Z")

</div>

Thanks everyone for your help, I uploaded my code to github↓

> **[ksuhara/threejs-test](https://github.com/ksuhara/threejs-test)**
>
> Contribute to ksuhara/threejs-test development by creating an account on GitHub.

Until this part compiles fine `import * as THREE from 'three'`

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 14, 2019, 9:10am UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/7 "2019-07-14T09:10:19Z")

</div>

I’ve had a look at your project but unfortunately I’m not familiar with Vue and Nuxt. This seems to be no `three.js` issue so a post at stackoverflow might be more promising.

---

<div class="post-metadata">

**Author:** ![paullacour](https://avatars.discourse-cdn.com/v4/letter/p/3ab097/32.png) [@paullacour](https://discourse.threejs.org/u/paullacour)\
**Post date:** [April 27, 2020, 11:16am UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/8 "2020-04-27T11:16:50Z")

</div>

hi @ksuhara, I had the same problem and eventually ended up finding a solution that worked for me in Nuxt. I followed the doc and imported like that:

```auto
import * as THREE from 'three'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'

```

Then make sure you transpile three in your nuxt.config.js like so:

```auto
build: {
    transpile: [
      'three'
    ], 
}

```

That should do the trick!

---

<div class="post-metadata">

**Author:** ![toniGallardo](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@toniGallardo](https://discourse.threejs.org/u/toniGallardo)\
**Post date:** [July 27, 2021, 1:57pm UTC](https://discourse.threejs.org/t/cannot-import-example-files-in-nuxt-js-vue-js/8463/9 "2021-07-27T13:57:51Z")

</div>

Thanks for this answer. I have the same problem and I was going crazy!!