Unable to autoImport components in nuxt

[genu]

What happened?

When integrating with nuxt, setting autoImport: true doesn't seem to work correctly.

An error is thrown:

The requested module '/_nuxt/node_modules/.pnpm/vee-validate@4.13.2_vue@3.5.6/node_modules/vee-validate/dist/vee-validate.js?v=b2471b49' does not provide an export named 'Form' 

Reproduction steps

1. Add nuxt module
2. Try to use <Form>

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

The requested module '/_nuxt/node_modules/.pnpm/vee-validate@4.13.2_vue@3.5.6/node_modules/vee-validate/dist/vee-validate.js?v=b2471b49' does not provide an export named 'Form'

Demo link

https://stackblitz.com/edit/github-kdegep

Code of Conduct

• I agree to follow this project's Code of Conduct

[ttonyh]

I'm getting the same error in Nuxt v3.13.2 but NOT in v3.13.1
https://github.com/nuxt/nuxt/releases/tag/v3.13.2

There were multiple changes importing, but I'm not sure which change caused this.

[ttonyh]

Referenced here:
nuxt/nuxt#29024

[joaolisboa]

Can confirm I have this issue in the latest nuxt version

[Ismaele-silla]

Having the same issue as well

[jakubm95]

The same error, works with nuxt 3.12.4 bug in 3.13.2

[rrubio]

Same here. What version of vee-validate should I use with nuxt 3.12.4?

[9M6]

@rrubio seems only up to that version works.

[luc122c]

I'm also having a similar issue (The requested module '[...]vee-validate.js' does not provide an export named 'Field'). Pinning Nuxt to 3.12.4 seems to be a good workaround for now.

[genu]

You don't have to downgrade nuxt to workaround this issue. You can simply import the component manually from vee-validate

[luc122c]

You don't have to downgrade nuxt to workaround this issue.

I know, but I have a lot of components importing Field, I don't fancy adding manual imports to them all. It's easier for me to pin Nuxt until the auto-import issue is resolved.

[ttonyh]

Just to clarify, if you're including the @vee-validate/nuxt module in Nuxt config, that's what setting up auto-imports for Vee-Validate. That's really its main feature.

[Nightfly-student]

For now I would recommend a workaround:

create a plugin: veevalidate.client.ts

`import { Form, Field, ErrorMessage } from 'vee-validate';

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("VForm", Form);
nuxtApp.vueApp.component("VField", Field);
nuxtApp.vueApp.component("VErrorMessage", ErrorMessage);
});`

Lets hope it gets fixed soon :)

[luc122c]

This issue should be fixed by this: nuxt/nuxt#29036

[jamesallan93]

This issue should be fixed by this: nuxt/nuxt#29036

It broken again, just had to update things here and got this error:

The requested module '[...]vee-validate.js' does not provide an export named 'Form')

[luc122c]

This issue should be fixed by this: nuxt/nuxt#29036

It broken again, just had to update things here and got this error:

There hasn't been a new Nuxt release since the fix was merged. It looks like it's due in 3.14: nuxt/nuxt#29077. If you want to try the fix it will be available on the nightly channel.

[jamesallan93]

I just remapped the component names:

For now I would recommend a workaround:

create a plugin: veevalidate.client.ts

`import { Form, Field, ErrorMessage } from 'vee-validate';

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("VForm", Form);
nuxtApp.vueApp.component("VField", Field);
nuxtApp.vueApp.component("VErrorMessage", ErrorMessage); });`

Lets hope it gets fixed soon :)

I will try that nightly

[murshex]

I have no problem using 3.13.1, only have this issue with 3.13.2

[logaretm]

Looks like Nuxt is looking at vee-validate's .js file rather than the esm.js version. Might be related to esm imports changing somewhere in Nuxt releases or they might need exports to be explicitly defined in package.json.

I will check.

[logaretm]

I believe this is fixed with v4.14.0. I updated the playground and it renders the form correctly without this error.

fix was in 97cebd8

Let me know if this isn't the case. I'm not sure if this is a wide spread problem in Nuxt or not, but I noticed it wasn't refering to the esm build files even tho they are provided, adding an exports field on all vee-validate packages seems to have done the trick.