Importar com chaves dentro de um componente Nuxt

Question

Estou tentando importar Three.js em um componente Nuxt.

<script>
import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
..

Enquanto a primeira linha funciona, a segunda me dá um "token inesperado {" - erro de sintaxe , também

const { OrbitControls } = require('three/examples/jsm/controls/OrbitControls')

A sintaxe da importação (a primeira versão) segue a documentação do Three.js.

Answer 1

Estou respondendo minha própria pergunta copiando uma resposta que dei em outro tópico: link

Enquanto isso, me deparei com esse projeto e me perguntei por que funciona. Resumindo, é configurado como um SPA. Tentei o mesmo com meu projeto e funcionou.

Então, em nuxt.config.js

export default {
  mode: "spa",
  ..

Portanto, acho que o problema tem a ver com a renderização do lado do servidor.

------ Algumas notas sobre o Modo Universal ------

Como eu queria usar meu aplicativo no modo universal, também tentei fazer importação condicional de plug-ins. Observe que a abordagem abaixo não funciona. Eu o incluo, porém, o SPA pode não ser uma opção e pode apontar a direção certa.

Mover

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

em um arquivo threeimports.js na pasta de plug-ins e adicione

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

para o nuxt.config.js

Achei que OrbitControls deveria estar disponível em qualquer lugar do projeto, mas não está. Tem a ver com a sintaxe de colchetes, já que o mesmo mecanismo funciona bem com outros módulos que não usam a sintaxe de colchetes.