[v4][Vue warn]: provide() can only be used inside setup() with the Nuxt3

What happened?

I have implemented a simple page that uses useField according to this document. I deployed the above page to AWS Lambda using Nuxt(3.0.0-rc.4) Nitro, and I am getting following warnings during SSR(This does not occur during client-side rendering). Curiously, this problem does not occur on a local server started by nuxt dev.

[Vue warn]: provide() can only be used inside setup()
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: onMounted is called when there is no active component instance to be associated with.

index.vue

<template>
  <div>
    <input v-model="value" />
    <span>{{ errorMessage }}</span>
  </div>
</template>
<script>
import { useField } from 'vee-validate';
export default {
  setup() {
    // a simple `name` field with basic required validator
    const { value, errorMessage } = useField('name', (inputValue) => !!inputValue);
    return {
      value,
      errorMessage,
    };
  },
};
</script>

My apologies if this is not a bug in vee-validate. Any help would be greatly appreciated.

Reproduction steps

1. Implement the sample page.
2. Build the app by the nuxt build
3. Deploy the app to AWS Lambda . …

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

[Vue warn]: provide() can only be used inside setup()
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

### Demo link

no link

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](CONDUCT.md)

[logaretm]

It looks like a Nuxt caveat since there isn’t a way to force vee-validate and nuxt to use the same Vue instance.

A current workaround recommended by them is to add build.transpile with an array of libraries that import Vue themselves.

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['vee-validate']
  }
})

I tried running the server locally and warnings are gone once I added vee-valdiate to build.transpile. Can you try that and let me know?

Closing this for now, LMK if that doesn’t work for you and I will re-open and check.

[productdevbook]

@productdevbook Can you provide a sample of this? Doesn’t the proposed solution work?

I think monorepo problem. @logaretm

https://github.com/huntersofbook/huntersofbook/blob/78bc2b1bae60e711aa74c04da6eaf01f0617209d/apps/playground/vite.config.ts#L16-L18

add and fixid.