primevue

primevue copied to clipboard

Describe the bug

I'm trying to migrate to Vite with an existing codebase of Primevue 2 + Vue 2. Unfortunately I can't change to Vue 3.

I was able to get Vite to load Vue2 But unable to include Primevue 2 due to two types of errors (below).

Is Primevue 2 compatable with Vite? If so what do I need to do in order to make it work?

1. First Error Error: Dynamic Require of "..../primevue/datatables/DataTable.vue" is not supported. I was able find this vite issue 3409 which pointed me to vite-plugin-commonjs which seems to have corrected this issue

2. Second Error Numerous "TypeError: XXX is not a function".

Reproducer

No response

PrimeVue version

2.9.1

Vue version

2.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. yarn add vue@2 vite vite-plugin-vue2 @vitejs/plugin-vue vue-template-compiler primevue@2
2. set up vue component importing any primevue component
3. run yarn dev
4. see errors

Expected behavior

No response

Hi @ihelmer07,

For the second issue, could you please try a basic Dropdown on your page? We need to determine whether the error is caused by Dropdown or Datatable.

Best Regards,

I'm having a similar issue with the Calendar component: [email protected], [email protected] and [email protected]

TypeError: DomHandler.generateZIndex is not a function

TypeError: DomHandler.findSingle is not a function

TypeError: ConnectedOverlayScrollHandler is not a constructor

TypeError: DomHandler.findSingle is not a function

I'm having the same issue with Datatable. As requested, I tried the Dropdown component, and it's giving me ObjectUtils.equals is not a function.

It seems to be related to ObjectUtils not getting imported correctly.

@ihelmer07 @slenrow I've been tinkering with this, and came up with a hack that can resolve this, at least in the short term.

Something about the static classes in Utils is exporting both __esModules and default, so there's trouble figuring out which object to use. If you update the static references to reference default, it tends to work. eg. ObjectUtils.getVNodeProp to ObjectUtils.default.getVNodeProp.

You can then use patch-package to save your changes so they persist when deployed to prod.

There is almost certainly a far better way to do this. But I'm not familiar enough with TS to find a cleaner method.

@FrankieBue -- Totally forgot to post back here, but I was able to resolve this with an import alias in my vite config to the umd file for the calendar module that was causing the issue

'primevue/calendar': path.resolve(__dirname, 'node_modules/primevue/components/calendar/calendar.umd.js')

@slenrow Interesting. I was going for a more holistic fix that would work across all components. If that resolves it though, it's absolutely better than my hack job.

I added this alias in my vite config and it resolves most of my problems with PrimeVue:

{
  find: /^primevue\/((?!config|resources).*)*$/,
  replacement: 'primevue/$1/$1.umd.js',
}

Due to the technical limitations of Vue 2's Vite support, we recommend the use of Vue 3.

If the problem still persists, please reopen this issue.