'LazyYoutubeVideo' only refers to a type, but is being used as a value here

[dipu-bd]

I am getting this error while building the project. Any solution?

ERROR in /mnt/c/Users/Dipu/Projects/***/src/****/DetailsVideo.vue(43,5):
43:5 'LazyYoutubeVideo' only refers to a type, but is being used as a value here.
    41 |     ActionToolbar,
    42 |     StatsBar,
  > 43 |     LazyYoutubeVideo,
       |     ^
    44 |   },
    45 | })
    46 | export default class DetailsVideo extends Vue {
Version: typescript 3.8.3

Inside my code I used it as a component:

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import LazyYoutubeVideo from "vue-lazy-youtube-video";

@Component({
  components: {
    LazyYoutubeVideo,
  },
})
export default class DetailsVideo extends Vue {
  //
}
</script>

My tscofig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "noImplicitThis": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "types": [
      "moment",
      "webpack-env",
      "vuetify"
    ]
  },
  "include": [
    "generated/**/*.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules", "bin"]
}

[dipu-bd]

I found out the reason why.

The import was referring to "node_modules/vue-lazy-youtube-video/types/index.d.ts"

After I changed the import to this it worked:

import LazyYoutubeVideo from "vue-lazy-youtube-video/src/VueLazyYoutubeVideo";

However, it would be nice and proper to be able to import the component directly.

[andrewvasilchuk]

@dipu-bd, Thanks for creating the issue. Now you can just import LazyYoutubeVideo from "vue-lazy-youtube-video";.