Named export 'YoutubeVue3' not found. The requested module is a CommonJS module, which may not support all module.exports as named exports

Question

I have a problem with youtube-vue3 plugin that I use in Nuxt3 project. It causes me problem with prerender on yarn generate. Here is how it looks:


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

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

I tried to add this plugin on transpile on build in nuxt.config.ts, not the option. Then I tried it with alias, also not an option. I also read and followed instructions on Nuxt page about ES Module, didn't make sense. What could be the solution? Thank you

score 0 · Answer 1 · answered Aug 11 '23 at 23:53

Here is the basic example of how to use it in 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)
})

In your component or page, ensure to wrap the Youtube-Component with ClientOnly component.

<script lang="ts" setup>

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

By following this example, you should be able to see it on your page.

Tested and it works!

Named export 'YoutubeVue3' not found. The requested module is a CommonJS module, which may not support all module.exports as named exports

1 Answers1