Nuxt3项目使用youtube-vue3执行yarn generate预渲染报错求助

问题场景 #

在Nuxt3项目中使用youtube-vue3组件，组件代码如下：

<Youtube
  :width="width"
  :height="height"
  :videoid="videoId"
  :controls="1"
  :autoplay="1"
/>
<script setup>
import { YoutubeVue3 as Youtube } from 'youtube-vue3'
</script>

执行yarn generate预渲染时出现以下错误：

ERROR  Named export 'YoutubeVue3' not found. The requested module 'file:///Users/elmir/Desktop/projects/ecomail-web/node_modules/youtube-vue3/dist/youtube-vue3.common.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'file:///Users/elmir/Desktop/projects/ecomail-web/node_modules/youtube-vue3/dist/youtube-vue3.common.js';
const { YoutubeVue3 } = pkg;


  import { YoutubeVue3 } from 'node_modules/youtube-vue3/dist/youtube-vue3.common.js';
  ^^^^^^^^^^^
  SyntaxError: Named export 'YoutubeVue3' not found. The requested module 'node_modules/youtube-vue3/dist/youtube-vue3.common.js' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:

  import pkg from 'node_modules/youtube-vue3/dist/youtube-vue3.common.js';
  const { YoutubeVue3 } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

可行解决方案 #

1. 修改组件导入方式 #

按照错误提示的规范，改用默认导入后解构的方式引入组件：

<Youtube
  :width="width"
  :height="height"
  :videoid="videoId"
  :controls="1"
  :autoplay="1"
/>
<script setup>
import pkg from 'youtube-vue3'
const { YoutubeVue3: Youtube } = pkg
</script>

2. 配置Nuxt3的Vite构建规则 #

在nuxt.config.ts中添加针对youtube-vue3的ES模块兼容配置，确保构建时正确处理CommonJS模块：

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['youtube-vue3'],
      esbuildOptions: {
        target: 'esnext'
      }
    },
    ssr: {
      noExternal: ['youtube-vue3']
    }
  }
})

3. 用客户端组件包裹播放器 #

由于YouTube播放器依赖浏览器环境，预渲染时SSR环境缺少浏览器API可能引发问题，将组件标记为仅客户端渲染：

<ClientOnly>
  <Youtube
    :width="width"
    :height="height"
    :videoid="videoId"
    :controls="1"
    :autoplay="1"
  />
</ClientOnly>
<script setup>
import pkg from 'youtube-vue3'
const { YoutubeVue3: Youtube } = pkg
</script>

4. 自定义客户端插件注册组件 #

在项目中创建插件文件plugins/youtube.client.ts（.client.ts后缀确保仅在客户端运行）：

import { defineNuxtPlugin } from '#app'
import pkg from 'youtube-vue3'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('Youtube', pkg.YoutubeVue3)
})

之后在页面中直接使用组件，无需手动导入：

<ClientOnly>
  <Youtube
    :width="width"
    :height="height"
    :videoid="videoId"
    :controls="1"
    :autoplay="1"
  />
</ClientOnly>

内容的提问来源于stack exchange，提问作者E. Mammadli