Nuxt.js and Three.js production build - Cannot use import statement outside a module

Support
, ,
1

I’m using Nuxt.js to create a full static landing page and i’m also using Three.js to render a 3d Globe in the page, everything works correct in dev mode and production mode in local, but when i try to deploy to netlify using yarn generate to create a full static site, it shows this error:

(function (exports, require, module, __filename, __dirname) { import { SyntaxError: Cannot use import statement outside a module at new Script (vm.js:88:7) at createScript (vm.js:261:10) at Object.runInThisContext (vm.js:309:10) at wrapSafe (internal/modules/cjs/loader.js:1040:15) at Module._compile (internal/modules/cjs/loader.js:1101:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Module.require (internal/modules/cjs/loader.js:1025:19) at require (internal/modules/cjs/helpers.js:72:18) at /Users/herow/Web-Projects/arpen-technologies/node_modules/vue-server-renderer/build.prod.js:1:77662 at Object.<anonymous> (webpack:/external "three/examples/jsm/controls/OrbitControls.js":1:0) at __webpack_require__ (webpack/bootstrap:25:0) at Module.37 (pages/index.js:22:25) at __webpack_require__ (webpack/bootstrap:25:0) at Module.38 (pages/index.vue:21:0)

This makes references to the imports that i’m doing in the Three.js component:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'

Here i’m importing the plugins from the jsm folder, i have tried importing this from the js folder but then i get THREE is not defined error.

I don’t know what does it mean. Please guide me.

2

Hi there and sorry to be slow to get back to you! I’d always start with the question: does it build locally? Our build environment won’t work if you can’t build it either.

While Netlify’s staff can’t advise on source-code level questions like this, the rest of the community may be able to. However, I can give you a great start on debugging on your own - these are the debugging steps we suggest: