在Nuxt应用中使用chess.js模块出现Chess is not a constructor问题咨询

chess.js v0.12.0及以上版本已调整为ESM默认导出，你使用的CommonJS解构导入语法仅适用于v0.11.x及更早的旧版本，解构得到的Chess为undefined，因此会抛出Chess is not a constructor错误，再加上Nuxt同构渲染的特性，服务端与客户端模块加载逻辑不一致，也会加剧导入异常问题。

不需要手动提取仓库核心代码，直接按以下配置即可正常使用：

• 首先确认已安装模块

npm install chess.js

• 改用正确的ESM默认导入语法，不要使用解构导入

import Chess from 'chess.js'
const chess = new Chess()

• Nuxt3额外配置（可选，仅服务端也需要调用chess.js时添加）
  在nuxt.config.ts中添加转译配置，避免服务端加载模块报错：

export default defineNuxtConfig({
  build: {
    transpile: ['chess.js']
  }
})

如果仅在客户端使用该模块，直接将用到chess.js的组件命名为xxx.client.vue即可，无需修改配置文件。

封装为全局插件的方案完全可行，具体操作如下：

• 在项目plugins目录下新建chess.client.js文件（后缀.client.js表示仅在客户端加载，适配Nuxt同构渲染特性）
• 写入插件注册代码：

import Chess from 'chess.js'

export default defineNuxtPlugin(() => {
  // 全局注入chess实例，所有组件可直接调用
  return {
    provide: {
      chess: new Chess()
    }
  }
})

• 组件内直接使用全局实例，无需重复导入

<script setup>
const { $chess } = useNuxtApp()
// 调用示例：获取当前棋盘布局
console.log($chess.board())
</script>

如果你希望完全自主控制源码，也可以将chess.js仓库dist目录下的编译后单文件核心代码拷贝到项目中，替换上述插件代码里的模块导入路径即可，运行效果完全一致。

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