Unexpected Token { When Importing A Module

Here's a codepen with this import I get the error(10 line index.vue): import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; so what's going on here

Solution 1:

I commented above about having the same problem. Meanwhile I came across this project and wondered why it works. Long story short, it's configured as a SPA. I tried the same with my project and it works.

So in nuxt.config.js

exportdefault {
  mode: "spa",
  ..

So I guess the problem has to do with server-side rendering.

------ Some notes on Universal Mode ------

Since I wanted to use my app in universal mode I also tried to do conditional import of plugins. Note that the approach below doesn't work. I do include it though, SPA might not be an option and it could point you in the right direction.

Move

importVuefrom'vue'import { OrbitControls } from"three/examples/jsm/controls/OrbitControls"Vue.use(OrbitControls)

into a threeimports.js file in the plugins folder and add

  plugins: [
   { src :"~/plugins/threeimports.js", ssr: false},
  ..

to the nuxt.config.js

I thought OrbitControls should be available from anywhere in the project, but it's not. It has to do with the curly bracket syntax, since the same mechanism works well with other modules that don't use the bracket syntax.