Nuxt 3 breaks

[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 tried adding “type”: “module” to the package.json but then it complains and ask me to change to .cjs and remove “type”: “module”

[jasontheiler]

Hey @krumpyzoid 👋

Have you tried transpiling TroisJS first? It helped me to eliminate the error.

Just specify the packages you want to transpile in your nuxt.config.ts, like so:

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  build: {
    transpile: ["troisjs"],
  },
});

This is more or less only a band-aid fix, though.

@klevron, as far as I can understand it, the error arises from the fact that TroisJS’s ESM output uses a .module.js extension instead of the more modern .mjs extension. This can break things when using a modern bundler like Vite. The Nuxt3 documentation has explained this problem in detail and I think it’s worth reading up on this topic: Nuxt 3 - Native ES Modules. The documentation also includes a library author guide section.

[klevron]

Example updated, it works now with vercel