HC200ok / vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x
MIT License
536 stars 105 forks source link

The Vue dependency is imported by `vue3-easy-data-table` instead of using the application's Vue instance #381

Closed ZeStrid3r-GB closed 1 month ago

ZeStrid3r-GB commented 1 month ago

Hello !

It seems that the Vue renderSlot function triggers an error on the Jest mount if the targeted component includes the vue3-easy-data-table component:

const wrapper = mount(TableGb, {
  global: {
    components: {
      EasyDataTable: Vue3EasyDataTable,
    },
    plugins: [i18n, [plugin, defaultConfig(config)]]
  },
  propsData: reactive({
    headers: [],
    items: []
  })
})
TypeError: Cannot read properties of null (reading 'isCE')
 ❯ renderSlot node_modules/vue3-easy-data-table/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2953:32
 ❯ Proxy.<anonymous> node_modules/vue3-easy-data-table/dist/vue3-easy-data-table.es.js:1624:13
    1622|           ])) : createCommentVNode("", tru…
    1623|           !unref(pageItems).length && !unr…
    1624|             renderSlot(_ctx.$slots, "empty…
       |             ^
    1625|               createTextVNode(toDisplayStr…
    1626|             ], true)

Apparently, this error occurs if several Vue instances are used at the same time, so we checked with a yarn why vue and, indeed, vue3-easy-data-table seems to import another Vue dependency:

=> Found "vue@3.4.37"
info Has been hoisted to "vue"
info This module exists because it's specified in "dependencies".
=> Found "vue3-easy-data-table#vue@3.4.26"
info This module exists because "vue3-easy-data-table" depends on it.
Nuzzlet commented 1 month ago

I was able to get things working via overriding the Vue version in my package.json to what my project uses.

In package.json:

{
...
"pnpm": {
    "overrides": {
        "vue": "SWAP WITH YOUR VUE VERSION"
     }
  }
}
ZeStrid3r-GB commented 1 month ago

I had to adapt this workaround to yarn but it seems to work too, thanks @Nuzzlet!

{
  ...
  "resolutions": {
    "vue": "<version>"
  }
}