in Production error context not accessible in shared components across nuxt modules or layers

[idlethumbs]

What happened?

We are using nuxt-layers and nuxt modules in conjunction with vee-validate.

Our shared component has a fieldwrapper that displays a field label, and shows any error messages below the field by using a field name prop. Currently we are using the provided ErrorMessage component to do this, but we have also tried the composition helpers. <ErrorMessage name="fieldName" />

On local everything works as expected.

in production errors in shared components are undefined

In production builds the errors are always undefined. It doesn't work when the component is provided either by a nuxt-layer, or by our validation module, it only works in production if our fieldwrapper is part of the main app that is running. I'm guessing this is something to do with the context injection of the errors that isn't working in production across modules / layers.

I have created a minimum reproduction repo using nuxt-layer as an example as it is simpler than a nuxt-module to implement: https://github.com/idlethumbs/vee-validate-shared-component-issue

Reproduction steps

1. Create a component to surface validation errors and share it via a module or layer
2. Consume the component in another app and then build for production
3. errors do not work
4. This cannot be reproduced in a sandbox ...

Version

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

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [X] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://github.com/idlethumbs/vee-validate-shared-component-issue

Code of Conduct

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

[petedavisdev]

I just got caught out by this. Appears to work when you run dev but doesn't work after build