导入模块时出现意外的令牌 {答案

【问题标题】：Unexpected token { when importing a module导入模块时出现意外的令牌 {
【发布时间】：2020-12-30 04:50:24
【问题描述】：

通过这个导入我得到了错误（10 line index.vue）：

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";

那么这里发生了什么？其他 ES6 导入很好。

【问题讨论】：

我不是专家，但其他导入没有大括号...也许您可以删除它们以查看它是否可以解决您的问题。
@The_Black_Smurf 还是一样
您能说明EffectComposer 正在导出什么/如何导出吗？例如，它是在执行export ... 还是export default ...，在您导入时可能会有所不同。
@TomO。 export { EffectComposer, Pass };, here
@s0up 你解决过这个问题吗？我遇到了同样的问题，这使得 Nuxt 中的 Threejs 几乎无法使用：link

【解决方案1】：

我不知道您要从中导入的文件的结构，但您是要导入默认值还是仅导入一个模块？

因为默认语法没有{}。就像您的第一次导入一样。如果您尝试导入的内容设置为默认导出，则需要删除这些括号。

【讨论】：

【解决方案2】：

我在上面评论过有同样的问题。与此同时，我遇到了这个project 并想知道它为什么有效。 长话短说，它被配置为 SPA。我对我的项目进行了同样的尝试，并且成功了。

所以在 nuxt.config.js

export default {
  mode: "spa",
  ..

所以我猜这个问题与服务器端渲染有关。

-----关于通用模式的一些注意事项------

由于我想在通用模式下使用我的应用程序，我还尝试对插件进行条件导入。 请注意，下面的方法不起作用。我确实包含它，但 SPA 可能不是一个选项，它可以为您指明正确的方向。

移动

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

到 plugins 文件夹中的 threeimports.js 文件中并添加

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

到 nuxt.config.js

我认为 OrbitControls 应该在项目的任何地方都可用，但事实并非如此。它与花括号语法有关，因为相同的机制适用于其他不使用括号语法的模块。

【讨论】：