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? The other ES6 imports are fine.

回答1:

I don't know the structure of the file where you want to import from, but are you trying to import a default or just a module?

Because the default syntax does not have {}. Much like your first import. If what you're trying to import is set as a default export, you need to remove those brackets.

Read about import in the MDN

回答2:

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

export default {
  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

import Vue from '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.

来源：https://stackoverflow.com/questions/63850866/unexpected-token-when-importing-a-module

标签

javascript

Vue.js

three.js

nuxt.js