NuxtJS引入ThreeJS的TWEEN模块报exports只读赋值错误如何解决

报错场景 #

在Nuxt项目中通过以下代码导入Three.js内置的TWEEN模块：

import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js'

控制台抛出异常：
Cannot assign to read only property 'exports' of object '#<Object>'
报错本质是Nuxt打包阶段的模块规范转换逻辑，和three包内压缩版tween模块的格式不兼容：打包工具误将ESM格式的预构建文件按照CommonJS规则处理，尝试写入只读的exports对象触发异常。

可行解决/规避方案 #

• 优先方案：安装独立维护的TWEEN.js依赖替代three内置版本
  这个方案兼容性最稳定，不受three内部依赖包格式变动影响，操作步骤：
  1. 安装独立依赖包

  npm install @tweenjs/tween.js
  # 其他包管理器对应命令
  yarn add @tweenjs/tween.js
  pnpm add @tweenjs/tween.js
  

  2. 替换原有导入语句

  import * as TWEEN from '@tweenjs/tween.js'
  

  项目中所有原有TWEEN相关的API调用逻辑不需要改动，独立包和three内置版本接口完全一致。
• 零额外依赖方案：调整导入路径，使用非压缩版ESM源文件
  不想新增项目依赖的话，可以跳过压缩后的预构建包，直接导入同目录下未压缩的标准ESM格式文件，避开打包工具的格式识别错误：

  import { TWEEN } from 'three/examples/jsm/libs/tween.module.js'
  

  只需要去掉原导入路径文件名里的.min后缀即可，不需要修改其他业务代码。
• 配置兼容方案：修改Nuxt构建配置跳过对应模块的转换
  前两种方案不适用时，可以在Nuxt配置文件中添加规则，告知打包工具不要对该tween模块执行CommonJS格式转换：

  // nuxt.config.js 对应配置项
  export default {
    build: {
      transpile: [
        (id) => /three\/examples\/jsm\/libs\/tween/.test(id)
      ]
    }
  }
  

  该方案在Nuxt2、Nuxt3下配置细节略有差异，优先选择前两种方案即可。

内容的提问来源于stack exchange，提问作者MAZ