Vite Compatibility

[YannikSc]

The problem

When using Vue 3 and Vite for building PrimeVue components can't be used as they throw a Uncaught SyntaxError: import not found: default in the browser console.

Vite also give a warning for PrimeVue: [vite] cannot resolve entry for dependency primevue.

Reproduce

# Setup Vue 3 with Vite as described on vuejs.org 
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
cd hello-vue3
npm install

# Install PrimeVue 3 as primefaces.org describes
npm install primevue@^3.0.0 --save

# Import any component in the src/main.js file
# Like the dialog (import Dialog from 'primevue/dialog';)

# Run vite
npm run dev

# Open http://localhost:3000/ (or similar) in your browser an open the console

[Zony-Zhao]

Same problem here.

I managed to have a workaround to pass compilation, but run time error occurs:

[Zony-Zhao]

For anyone comes to this.
vitejs/vite#933.
Can PrimeVue guys export these js module as es module for vite to work?

[cagataycivici]

Vite support is in our high priority list, I'll be keeping this issue updated.

[nandin-borjigin]

Any update on this ?

[cagataycivici]

Planned for next week!

[tudorels]

It's very good news!

[cagataycivici]

In progress...

[cagataycivici]

Resolved for 3.2.0-rc.1, I'll create a simple Quickstart example repo as well.

[thiago-figueiredo]

When will it be possible to install this RC? Do you know? I see no such tag on the repo.

[cagataycivici]

Later this week.

[PatrickVanRietschoten]

After a long search, came by this thread. Good to see that this is going to be picked up!

[cagataycivici]

Try 3.2.0-rc.1 please and let us know how it goes. Also we have a starter app now.

[lewebsimple]

Though the starter app works fine (with warnings about <script setup> being experimental), I can't get 3.2.0-rc.1 to import with TypeScript:

Module '".../vite-primevue/node_modules/primevue/config/PrimeVue"' has no default export.ts(1192)

I'm using the vue-ts preset with yarn create @vitejs/app to which I added primevue / primeicons.

[mllull]

I can confirm that, as @lewebsimple said, PrimeVue 3.2.0-rc.1 is not working as expected if you are using TypeScript.

I moved back to primevue@3.1.2 until TS support.

[EthanHaid]

You can get around that issue with
import * as PrimeVue from 'primevue/config';
though a default export should be added eventually to avoid this

[slumtrimpet]

You can get around that issue with
import * as PrimeVue from 'primevue/config';
though a default export should be added eventually to avoid this

That gets around the hard stop on being able to use 3.2.0-rc.1 with vite/typescript at all... but in the browse console it still throws:

[Vue warn]: A plugin must either be a function or an object with an "install" function.

On the line:

app.use(PrimeVue)

[slumtrimpet]

You can get around that issue with
import * as PrimeVue from 'primevue/config';
though a default export should be added eventually to avoid this

That gets around the hard stop on being able to use 3.2.0-rc.1 with vite/typescript at all... but in the browse console it still throws:

[Vue warn]: A plugin must either be a function or an object with an "install" function.

On the line:

app.use(PrimeVue)

Following up on myself and @EthanHaid... this imports DOES work and doesn't gripe about anything in the console:

import PrimeVue from 'primevue/config/config.esm'

Also, because the impact is even more evident on this module, the following gets the PrimeVue ToastService to work in vite/typescript:

import ToastService from 'primevue/toastservice/toastservice.esm'

[lewebsimple]

@slumtrimpet I'm getting a missing definition error when importing from primevue/config/config.esm ... I've enabled allowJs in tsconfig.
What works in my case without console warning produces a (harmless) ts(1192) about no default export, which I ignore with @ts-expect-error

Any idea ?

[Anubarak]

Is there any plan to include this in the vue2 version as well?
So in your PrimeVue v2
https://github.com/primefaces/primevue/releases/tag/2.10.4

I have a really hard time to get Vue 2.7 with PrimeVue 2 to run under vite but it's an old legacy project that cannot be updated to PrimeVue 3 that easily.