Import in SingleComponent not working (Options API)

[makakken]

Have you ever tried to use Vue3DataTable inside a component only? I wanted to avoid importing it on application level and setup as global component, so i tryed:

<script setup>
  import { ref } from 'vue'
  import Vue3EasyDataTable from 'vue3-easy-data-table'
  import 'vue3-easy-data-table/dist/style.css'
</script>

When i Try to rename the imported component with: import { Vue3EasyDataTable as EasyDataTable } from 'vue3-easy-data-table' i get the following error: SyntaxError: ambiguous indirect export: Vue3EasyDataTable

Does anyone know why?

Tip: You can fix this easy by importing it import Vue3EasyDataTable from 'vue3-easy-data-table' and then assign to another variable: const EasyDataTable = Vue3EasyDataTable

[jxn-30]

When using the form import { Vue3EasyDataTable as EasyDataTable } from 'vue3-easy-data-table' you don't use the default export anymore but expect the module vue3-easy-data-table to export something with the name Vue3EasyDataTable.

If you want to import the whole module as EasyDataTable instead of Vue3EasyDataTable, just do it like this: import EasyDataTable from 'vue3-easy-data-table', it works! The general form import [name] from [module] imports the default export of [module] and allows to access it via [name]. You can read more about this on mdn: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Does that answer your question / helps you further? :)

[makakken]

👍🏼 thanks... still not familiar enough with js-imports ;)