Use inject/provide in functionnal components

[CapitaineToinon]

In order to have generic and dynamically typed components, I'm trying to use inject and provide inside functional components but that seems not possible? Is this done on purpose or is this a bug?

The point is to have generic components with typescript but here is a simple javascript reproduction:

<script setup>
import { h, provide, inject } from 'vue'
  
const key = Symbol()

const Hello = (_, { slots }) => {
  provide(key, "world")
  return h('div', slots.default())
}
  
const Inside = () => {
  const text = inject(key, "not found")
  return h("div", text);
}
</script>

<template>
  <Hello>
    <Inside></Inside>
  </Hello>
</template>

about:srcdoc:160 [Vue warn]: provide() can only be used inside setup(). 
  at <Hello> 
  at <Repl>

https://sfc.vuejs.org/#eNp9UU1vgzAM/StWLoBEyb2jlXbbzrtGmlowKx0kkWPoqor/PkParVql5RR/vPfs54t69r4YB1RrVYaKWs8QkAe/NbbtvSOGCxxy8OTGtsYcWnvEimGChlwPiSATYwGMrZwNDJ94hg28nfu969LM2Fv+BbvOSSV9z4UwdI4DTBlstnCZ4Vf6VOA5GHVy1NVGCR6AZBqycEiTuh2TPGKLGpvd0HGaSc90P8CrDUI0K/2yxwrjF0s+LnBTso6hcYN9UDNK5IzKF1j2tKiUOjok3kjA2Ptux7hEAOWyogQgr4xjbEt9/Swd+tZS6h+wylX0edXvfHEMzsollqnNtRCMWsc95pwYPsdGHZh9WGsdmmq+3zEUjj60/AoaLLc9Fhj61Z7cKSAJsexyx6ElOSKtCG2NhPQf55/WB96ZVtyZ1PQNgIfIYg==

Edit:

Seems like doing this instead works:

<script setup>
import { h, provide, inject, defineComponent } from 'vue'
  
const key = Symbol()

const Hello = defineComponent((props, { slots }) => {
  provide(key, "world")
  return () => h('div', slots.default())
})
  
const Inside = () => {
  const text = inject(key, "not found")
  return h("div", text);
}
</script>

<template>
  <Hello>
    <Inside></Inside>
  </Hello>
</template>

https://sfc.vuejs.org/#eNp9UU1vgzAM/StWLgUpJfeOVpp22c675tKCGXTgREmgqyr++0xSpqmTdvPH83vP9k08W1tMI4qdKH3lOhvAYxjtQVM3WOMC3KCVYJ2ZuholdHTGKkiosekIXwxjCCnADI0zA2yYaqMJQFNlyAf4xCvs4f06nEyf5ZrW+iv2veHOA0+WsZL1klV9b4KHOYf9AW4L5d1DxpQStLgY19daMCeAY8uOIIvgNtvU3bSRiaFghePYhyxn5BzRq4c38szHJtJcFEmdgF+B62nZVZBMgMaM9CDaZlqwnhYyjuVPLKOpVOmafEdOAg62PwbkDKCMu8eQk2TiUKp7EBFqhZTqZ1RIkT6yHY62OHtD/LPoWd8bXotd2mKp8SeWXIs2BOt3SvmmWj599oVxH4qjwo0UugEL9MP25MzFo2Ni3uQXh+LihG7rkGp06P7jfID+4V1o+TazmL8BnDrXUg==

I was under the impression that both syntax should be strictly equal. Is this caused by this section of the documentation?

Functional components are an alternative form of component that don't have any state of their own. They act like pure functions: props in, vnodes out. They are rendered without creating a component instance (i.e. no this), and without the usual component lifecycle hooks.

If so I think it should be noted more clearly that functionnal component have such limitations in the documation.

[LinusBorg]

I was under the impression that both syntax should be strictly equal. Is this caused by this section of the documentation?

The second variant does not create a functional component. it's a shortcut to creating a normal component, but passing just the setup function. That's why it works - it creates a stateful component.

If so I think it should be noted more clearly that functionnal component have such limitations in the documation.

We are open to suggestions in the core docs repository.

As to why it doe not work: As functional components can't have (reactive) state, they only re-render when their props change (passed in by the re-rendering parent component. As inject() is not props, but creating internal state, it follows that inject state can't be used in a functional component.

[CapitaineToinon]

The second variant does not create a functional component. it's a shortcut to creating a normal component, but passing just the setup function. That's why it works - it creates a stateful component.

How that makes sense. Well I understood that defineComponent would create a normal component but I thought that functionnal component were stricly equal to the setup function. So I thought that if vue encountered a functionnal component, it would create it by assuming the function was a setup function. But it seems like components and functionnal components are technically speaking two different implementations, which is what I was confused about.

Thanks for the quick answer!