6

I want to import modules in examples folder in THREE.js such as OBJLoader into my Nuxt Project.

I can import main folder of THREE, but error occurs when trying to import modules in examples folder.

Tried these steps in official docs.

https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

I'm getting error below

SyntaxError Unexpected token {

<template>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default{
}
</script>

here are my github repository https://github.com/ksuhara/threejs-test

Kenta
  • 69
  • 1
  • 2
  • What is the context for that error message? Where are you seeing it? What part of your code is it referring to? – Phil Jul 16 '19 at 05:43
  • Cannot reproduce this at all ~ https://codesandbox.io/s/vue-template-jmdmd – Phil Jul 16 '19 at 05:53
  • probably a duplicate of https://stackoverflow.com/questions/41761761/i-cant-use-third-party-components-in-nuxt-js-vue-js – oshell Jul 16 '19 at 07:50
  • Did you find the reason why you were getting this error? Im facing the same issue for a while, and apparently this is the only place that talks about it. Could you update the question, or maybe answer it? – Claudio Bonfati Apr 13 '20 at 19:41

3 Answers3

8

Finally I could find what was wrong.

Well, it has to do with nuxt building system. When using third parts libs, you should add them into nuxt.config.js bild->transpile array so it can be included as a dependency with Babel.

transpile: [ "three" ]

Ref: https://nuxtjs.org/api/configuration-build#transpile

Claudio Bonfati
  • 493
  • 3
  • 14
  • Thank you so much ! Finally got it working, was stuck with this for days. They should really mention this in the offical nuxt guide in the plugin section. – Aerodynamic Oct 14 '20 at 11:09
  • This worked for me, just a quick note for those who don't find it obvious: the `transpile` array property has to go WITHIN the `build` object property in your nuxt.config.js file. I blindly copied what was in the answer and put it in my file, which obviously didn't work. – jackrugile Aug 26 '21 at 17:34
0

Threejs must be run on the client side so enclosed the component with <client-only> tag and loaded it dynamically with const MyComponent = () => import('~/path/to/MyComponent.vue'); but now I am getting the error on server side.

Giorgos Lemonidis
  • 61
  • 2
  • 6
0

Finally I managed to do it like this!

<template>
    <div>
        <client-only>
            <threejs-component />
        </client-only>
    </div>
</template>
<script>
export default {
    components: {
        ThreejsComponent: process.browser ? () => import('~/path/to/ThreejsComponent.vue') : null
    }
}
</script>

inside ThreejsComponent.vue are all the threejs imports

Giorgos Lemonidis
  • 61
  • 2
  • 6