Nuxt3安装vue3-spinner遇报错：require在ES模块作用域未定义怎么办？

问题根源 #

vue3-spinner的package.json里标记了"type": "module"（声明为ES模块），但包内部可能混用了CommonJS的require语法，和Nuxt3的模块处理逻辑冲突，导致报错。

可行解决步骤 #

1. 让Nuxt转译这个包 #

在你的nuxt.config.ts里添加build配置，指定转译vue3-spinner：

export default defineNuxtConfig({
  build: {
    transpile: ['vue3-spinner']
  }
})

改完后重启Nuxt服务，再测试组件是否正常。

2. 避免全局注册+局部导入的冲突 #

你现在既在插件里全局注册了整个vue3-spinner，又在组件里单独导入DotLoader，这种重复操作可能加重模块加载的冲突。可以二选一：

• 只用全局注册：删掉组件里的import { DotLoader } from "vue3-spinner"，直接在模板里写<DotLoader />就行
• 只用局部导入：删掉@/plugins/vue3-spinner.js这个插件文件，保留组件里的局部导入代码

3. 换个兼容更好的组件（备选） #

如果上面的方法都不管用，建议换个适配Nuxt3的Spinner组件，比如@vueuse/components提供的UseSpinner，或者自己写个纯CSS的加载动画，反而更省心。

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