Nuxt3 / threejs+troisjs deployment on Vercel ES module error

Question

[HEAD] / 14:23:36:68 er.js:950:32) 2021-12-06T13:23:37.165Z 2ab8bf44-0857-49e7-8bf5-8cbf4118ca4b ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js\nrequire() of ES modules is not supported.\nrequire() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js from /var/task/node_modules/troisjs/build/trois.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.\nInstead rename OrbitControls.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/node_modules/three/examples/jsm/package.json.\n","reason":{"errorType":"Error","errorMessage":"Must use import to load ES Module: /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js\nrequire() of ES modules is not supported.\nrequire() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js from /var/task/node_modules/troisjs/build/trois.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.\nInstead rename OrbitControls.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/node_modules/three/examples/jsm/package.json.\n","code":"ERR_REQUIRE_ESM","stack":["Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js","require() of ES modules is not supported.","require() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js from /var/task/node_modules/troisjs/build/trois.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.","Instead rename OrbitControls.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/node_modules/three/examples/jsm/package.json.",""," at new NodeError (internal/errors.js:322:7)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Module.require (internal/modules/cjs/loader.js:974:19)"," at require (internal/modules/cjs/helpers.js:93:18)"," at Object. (/var/task/node_modules/troisjs/build/trois.js:7:24)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js","require() of ES modules is not supported.","require() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js from /var/task/node_modules/troisjs/build/trois.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.","Instead rename OrbitControls.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/node_modules/three/examples/jsm/package.json.",""," at process. (/var/runtime/index.js:35:15)"," at process.emit (events.js:412:35)"," at processPromiseRejections (internal/process/promises.js:245:33)"," at processTicksAndRejections (internal/process/task_queues.js:96:32)"]} Unknown application error occurred

I'm having a problem deploying my project to Vercel. It's a Nuxt + SSG migration of my Vue Portfolio.

Everything is working except the header has a 3D object rendered with treejs & troisjs.

I am unsure how to proceed here. Do I have to configure something or should I edit the package as the error is asking ? How can I edit the package since Vercel will yarn install dependencies ?

Edit: I tried editing node_modules/troisjs/package.json and added "type": "module" The error I got is

The requested module 'troisjs' does not provide an export named 'Mesh'
  at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
  at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
  at async Loader.import (internal/modules/esm/loader.js:178:24)
  at async file:///C:/Dev/PortfolioTrunk/Portfolio/nuxt3-app/.output/server/chunks/render.mjs:540:24
  at async renderMiddleware (file:///C:/Dev/PortfolioTrunk/Portfolio/nuxt3-app/.output/server/chunks/render.mjs:584:20) 
  at async handle (file:///C:/Dev/PortfolioTrunk/Portfolio/nuxt3-app/.output/server/node_modules/h3/dist/index.mjs:601:19)

The module DOES have a Mesh export though

Here is my component

<template>
<div style="display: flex; justify-content: center; align-items: center;">
    <div style="width: 800px; height: 800px">
    <Renderer ref="renderer" :alpha="true" :resize="true" :orbitCtrl="{active: true, enableZoom: false}">
    <Camera :position="{ z: 7 }" />
    <Scene :background="'#E8E6DE'">
      <PointLight :position="{ y: 50, z: 50 }" />
      <Mesh ref="box">
            <TorusKnotGeometry :radius="1.5" :tube="0.625" :tubularSegments="300" :radialSegments="200" />
            <ToonMaterial :color="'#0F161B'" />
        </Mesh>
    </Scene>
    <EffectComposer>
      <RenderPass />
      <FXAAPass />
    </EffectComposer>
  </Renderer>
    </div>
</div>
</template>

<script>
import { Mesh, Camera, PointLight, Renderer, Scene, TorusKnotGeometry, ToonMaterial, EffectComposer, RenderPass, FXAAPass } from 'troisjs';


export default {
    components: { Mesh, Camera, PointLight, Renderer, Scene, TorusKnotGeometry, EffectComposer, RenderPass, FXAAPass, ToonMaterial },
    data() {
        return {
        }
    },
    methods: {
      
    },
    mounted() {
      const renderer = this.$refs.renderer;
      const box = this.$refs.box.mesh;
      renderer.onBeforeRender(() => {
        box.rotation.x += 0.003;
      })
      },
}

</script>

Can you build and run the project locally as if it was in production? (not with `yarn dev` so) Also, could you please try to SSG it and see if it works [here](https://app.netlify.com/drop) for debugging purposes? Then, if would be perfect if you have some details on your node.js version and maybe a [repro]. — kissu, Dec 06 '21 at 13:46
Also, I'm not sure but [this one](https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module) may be related maybe? — kissu, Dec 06 '21 at 13:47
Edited post with relevant information to the link you provided. Tried editing the package.json to add `"type": "module"` — Gradient, Dec 06 '21 at 14:26
Try to look up to this one: https://github.com/troisjs/trois/issues/75#issuecomment-866158704 — kissu, Dec 06 '21 at 14:34
Here is a nuxt3 example : https://github.com/troisjs/nuxt3-test — soju, Dec 06 '21 at 21:20

score 1 · Answer 1 · answered Jan 13 '22 at 10:17

1

in nuxt.config add trois to transpile:

build: { transpile: [ 'troisjs', ], }

answered Jan 13 '22 at 10:17

user17923296

11
1

I will check this out thanks for the answer on an "old" issue – Gradient Jan 13 '22 at 12:10
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 13 '22 at 12:44

score 0 · Answer 2 · edited Dec 07 '21 at 20:32

0

You should use a custom component and client-only : https://nuxtjs.org/docs/features/nuxt-components/#the-client-only-component

You will find an example here : https://github.com/troisjs/nuxt3-test

<client-only>
  <My3DComponent />
</client-only>

edited Dec 07 '21 at 20:32

kissu

40,416
14
65
133

answered Dec 07 '21 at 20:31

soju

25,111
3
68
70

This is solving the actual issue of the modules?! Damn. – kissu Dec 07 '21 at 20:37
1

Yes, some parts of troisjs/threejs are not compatible with ssg – soju Dec 07 '21 at 20:46
Still not working for me :| – Gradient Dec 16 '21 at 11:44
With vercel and nodejs hosting, you have to register the component in a client-side only plugin. I have updated the repo. – soju Dec 16 '21 at 19:40

Nuxt3 / threejs+troisjs deployment on Vercel ES module error

2 Answers2