未找到名为“YoutubeVue3”的导出。请求的模块是 CommonJS 模块,可能不支持所有 module.exports 作为命名导出

问题描述 投票:0回答:1

我在 Nuxt3 项目中使用的 youtube-vue3 插件有问题。这导致我在纱线生成上出现预渲染问题。这是它的样子:


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

纱线生成错误:

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

我尝试在 nuxt.config.ts 中的构建转换上添加此插件,而不是选项。然后我尝试使用别名,也不是一个选项。我还阅读并遵循了 Nuxt 页面上有关 ES 模块的说明,但没有意义。解决办法是什么?谢谢你

nuxt.js nuxt3 esmodules
1个回答
0
投票

这是如何在 Nuxt 3 中使用它的基本示例

npm i vue3-youtube

~/plugins/loading-youtube.client.ts

import Youtube from 'vue3-youtube'
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Youtube-Component', Youtube)
})

在您的组件或页面中,确保用

Youtube-Component
组件包裹
ClientOnly

<script lang="ts" setup>

</script>
<template>
    <div>
        <ClientOnly>
            <Youtube-Component src="https://www.youtube.com/watch?v=y6ulxSMYf40" />
        </ClientOnly>
    </div>
</template>

按照此示例,您应该能够在您的页面上看到它。

经过测试,有效!

© www.soinside.com 2019 - 2024. All rights reserved.