Неожиданный токен {при импорте модуля

Question

Вот код

с этим импортом я получаю ошибку (10 строк index.vue):

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

так что здесь происходит? Другой импорт ES6 в порядке.

Answer 1

Я не знаю структуру файла, из которого вы хотите выполнить импорт, но вы пытаетесь импортировать файл по умолчанию или просто модуль?

Поскольку синтаксис по умолчанию не имеет {}. Очень похоже на ваш первый импорт. Если то, что вы пытаетесь импортировать, задано как экспорт по умолчанию, вам необходимо удалить эти скобки.

Об импорте читайте в MDN

Answer 2

Выше я прокомментировал ту же проблему. Тем временем я наткнулся на этот проект и задумался, почему он работает. Короче говоря, он настроен как SPA. Я пробовал то же самое со своим проектом, и он работает.

Итак, в nuxt.config.js

export default {
  mode: "spa",
  ..

Итак, я думаю, проблема связана с рендерингом на стороне сервера.

------ Некоторые примечания по универсальному режиму ------

Поскольку я хотел использовать свое приложение в универсальном режиме, я также попытался выполнить условный импорт плагинов. Обратите внимание, что приведенный ниже подход не работает. Я все же включаю его, SPA может не быть вариантом, и он может указать вам правильное направление.

Переехать

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

в файл threeimports.js в папке плагинов и добавьте

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

в nuxt.config.js

Я думал, что OrbitControls должен быть доступен из любой точки проекта, но это не так. Это связано с синтаксисом фигурных скобок, поскольку тот же механизм хорошо работает с другими модулями, которые не используют синтаксис скобок.