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

Questions
,
1

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

SyntaxError
Unexpected token {

Source Code

<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

2

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

3

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

4

Can you please demonstrate the issue with a live example? Otherwise consider to share your code as a github repository.

5

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.

1 Like
6

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

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

7

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.

8

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:

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:

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

That should do the trick!

1 Like
9

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