ERROR: require() not supported, instead change to a dynamic import()

[silveltman]

Awesome plugin!

I'm trying to get it to work in a Vue component in Astro. However, I'm getting an error:

ld\trois.js not supported.
  Instead change the require of OrbitControls.js in C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\troisjs\build\trois.js to a dynamic import() which is available in all CommonJS modules.
    at async Promise.all (index 0)
    at async nodeImport (C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:50356:21)
    at async eval (/src/components/NeptuneTrois.vue:4:31)
    at async instantiateModule (C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:50286:9) error   require() of ES Module C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\three\examples\jsm\controls\OrbitControls.js from C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\troisjs\build\trois.js not supported.  Instead change the require of OrbitControls.js in C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\troisjs\build\trois.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\troisjs\build\trois.js:7:24)
    at async Promise.all (index 0)
    at async nodeImport (C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:50356:21)
    at async eval (/src/components/NeptuneTrois.vue:4:31)
    at async instantiateModule (C:\Users\silve\Documents\Web dev\astro\astro-webtunus\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:50286:9) (x2)

Look similar to https://github.com/troisjs/trois/issues/107 but can't seem to figure out how to fix it, since the issue goes in on Nuxt, not Astro.

My Vue component:

<template>
  <Renderer ref="renderer">
    <Camera :position="{ z: 10 }" />
    <Scene>
      <PointLight :position="{ y: 50, z: 50 }" />
      <Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
import {
  Box,
  Camera,
  LambertMaterial,
  PointLight,
  Renderer,
  Scene,
} from 'troisjs'

export default {
  components: { Box, Camera, LambertMaterial, PointLight, Renderer, Scene },
}
</script>

How I called the component:

---
import Trois from '../components/NeptuneTrois.vue';
---
<Trois client:load />