Vercel ES 模块上的 Nuxt3/threejs+troisjs 部署错误

Posted 2023-03-28

【中文标题】Vercel ES 模块上的 Nuxt3/threejs+troisjs 部署错误

【英文标题】：Nuxt3 / threejs+troisjs deployment on Vercel ES module error

【发布时间】：2022-01-11 17:03:29

【问题描述】：

[头部] / 14:23:36:68 er.js:950:32) 2021-12-06T13:23:37.165Z 2ab8bf44-0857-49e7-8bf5-8cbf4118ca4b 错误未处理的承诺拒绝 "errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"错误 [ERR_REQUIRE_ESM]: 必须使用导入来加载 ES模块：/var/task/node_modules/three/examples/jsm/controls/OrbitControls.js\n不支持 ES 模块的require()。\n/var/task/node_modules/three/examples/jsm/controls 的require() /var/task/node_modules/troisjs/build/trois.js 中的 /OrbitControls.js 是一个 ES 模块文件，因为它是一个 .js 文件，其最近的父 package.json 包含定义所有 .js 的 "type": "module"该包范围内的文件作为 ES 模块。\n改为将 OrbitControls.js 重命名为以 .cjs 结尾，将要求代码更改为使用 import()，或从 /var/task/node_modules/three/ 中删除 "type": "module" examples/jsm/package.json.\n","re​​ason":"errorType":"Error","errorMessage":"必须使用import来加载ES模块：/var/task/node_modules/three/examples/jsm /controls/OrbitControls.js\nrequire() 的 ES 模块不支持。\nrequire() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js 来自 /var/task/node_modules/troisjs/build/trois.js 是一个 ES 模块文件一个 .js 文件，其最近的父 package.json 包含 "type": "module"，它将该包范围内的所有 .js 文件定义为 ES 模块。\n改为将 OrbitControls.js 重命名为以 .cjs 结尾，更改需要使用的代码import()，或从 /var/task/node_modules/three/examples/jsm/package.json 中删除 "type": "module"。\n","code":"ERR_REQUIRE_ESM","stack":["Error [ERR_REQUIRE_ESM]: 必须使用 import 加载 ES Module: /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js","re​​quire() of ES modules is not supported.","re​​quire() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js 来自 /var/task/node_modules/troisjs/build/trois.js 是一个 ES 模块文件，因为它是一个与父包最近的 .js 文件。 json 包含 "type": "module" ，它将该包范围内的所有 .js 文件定义为 ES mo dules.","改为将 OrbitControls.js 重命名为以 .cjs 结尾，将要求代码更改为使用 import()，或从 /var/task/node_modules/three/examples/jsm/package 中删除 "type": "module" .json.",""," 在新的 NodeError (internal/errors.js:322:7)"," 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13) "," 在 Module.load (internal/modules/cjs/loader.js:950:32)"," 在 Function.Module._load (internal/modules/cjs/loader.js:790:12)"," 在Module.require (internal/modules/cjs/loader.js:974:19)"," 在 require (internal/modules/cjs/helpers.js:93:18)"," 在 Object. (/var/task/node_modules/troisjs/build/trois.js:7:24)"," 在 Module._compile (internal/modules/cjs/loader.js:1085:14)"," 在 Object.Module。 _extensions..js (internal/modules/cjs/loader.js:1114:10)"," 在 Module.load (internal/modules/cjs/loader.js:950:32)"],"promise": ,"stack":["Runtime.UnhandledPromiseRejection: 错误 [ERR_REQUIRE_ESM]: 必须使用 import 加载 ES 模块：/var/task/node_modules/three/examples/jsm/controls/OrbitControls.js","re​​quire() of不支持 ES 模块。","re​​quire() of /var/task/node_modules/three/examples/jsm/controls/OrbitControls.js from /var/task/node_modules/troisjs/build/trois.js 是一个 ES 模块文件，因为它是一个 .js 文件，其最近的父 package.json 包含 "type": "module"，它将该包范围内的所有 .js 文件定义为 ES 模块。","改为重命名 OrbitControls.js 以以 .cjs 结尾，将要求代码更改为使用 import()，或在进程中从 /var/task/node_modules/three/examples/jsm/package.json.",""," 中删除 "type": "module"。 (/var/runtime/index.js:35:15)"," 在 process.emit (events.js:412:35)"," 在 processPromiseRejections (internal/process/promises.js:245:33)", " 在 processTicksAndRejections (internal/process/task_queues.js:96:32)"] 发生未知的应用程序错误

我在将项目部署到 Vercel 时遇到问题。 这是我的 Vue 投资组合的 Nuxt + SSG 迁移。

一切正常，除了标题有一个用 treejs 和 troisjs 渲染的 3D 对象。

我不确定如何在此处继续。我必须配置一些东西还是应该按照错误要求编辑包？由于 Vercel 将安装纱线依赖项，我该如何编辑包？

编辑： 我尝试编辑node_modules/troisjs/package.json 并添加"type": "module" 我得到的错误是

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)

该模块确实有一个网格导出

这是我的组件

<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>

【问题讨论】：

您能否像在生产环境中一样在本地构建和运行项目？ （不适用于yarn dev 所以）另外，您能否尝试对它进行SSG 并查看它是否适用于here 用于调试目的？那么，如果你有关于你的 node.js 版本的一些细节，也许是一个minimal reproducible example，那将是完美的。

另外，我不确定，但this one 可能是相关的？

在本地运行构建时遇到完全相同的错误。

已编辑帖子，其中包含您提供的链接的相关信息。尝试编辑 package.json 以添加 "type": "module"

试试看这个：github.com/troisjs/trois/issues/75#issuecomment-866158704

【参考方案1】：

在 nuxt.config 中添加 trois 到 transpile：

构建： 转译：[ 'troisjs', ],

【讨论】：

我会检查一下感谢您对“旧”问题的回答

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

您应该使用自定义组件和 client-only : https://nuxtjs.org/docs/features/nuxt-components/#the-client-only-component

你会在这里找到一个例子：https://github.com/troisjs/nuxt3-test

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

【讨论】：

这是解决模块的实际问题？！该死的。

是的，troisjs/threejs的某些部分不兼容ssg

仍然不适合我：|

使用 vercel 和 nodejs 托管，您必须在仅客户端插件中注册组件。我已经更新了 repo。