Dependency Injection inheritance fails when provided after grandchildren are rendered.

[benjamin-larsen]

Vue version

Commit b555f02, latest in main branch.

Link to minimal reproduction

https://play.vuejs.org/#eNrlVU2P2jAQ/SuWVYkgRYkWONGA2m330Er90La9+ULDAIbEjvzBUiH+e8c2ScmKROpq20N7i2eex8/vPStH+rqqkr0FOqWZzhWvDNFgbDVngpeVVIYcSaXkni+BnMhKyZIMED5o2m9kWd2cG0nqV27e4CUTTJx3Rozu4AejMWHUI8+HMjp0qJUVueFSEAUrBXoT5ThlSI5MEOI+kxcrqXL4Vi0XBqIhTj65bVkaCCNVXBgoqwL7uCIkC6ymhpcwY/Qt1hMhH6Iho/MskAy479YYPPhVXvB8h8iagdlw7cD3YZ2lAYibsvTiJBpTo3MpVnydbLUUqKJnzajjzQtQnyp3M83oNNzH9RZFIR/e+5pRFuK6nm8g312pb/XB1Rj9jFxA7VG3pmcWag0mtO++fIQDfjfNUi5tgeie5j1oWVjHMcBurVgi7QucZ/vOm83F+qu+OxgQur6UI+qQJ49nFF118nZd/RfdcTLx+9BMVLHJTXcOHWTUCtrIB+0iqOheTLjYQm7iOrUxkeIWMEDwQVqB9XoZ4tQKNSYLzdSGYGdBZm5eJGxRuMh1h7nhjnH2wNaBUTQks3lQwI1N9ovCAg4PPOtpPtX+NbT5/eb2vjex5Hv/QTxjcoO2HMNNT+iCq/tnM7r6bEgahqRhyuNX0NjR79+45d/47/r3p2zpy4XXJIx5bv9GHf6Nn+qft6Pfv0nLv8m/4d/z2jLusGXyVFu8yn2/55bq/5fYk8diXxfy9BPP2P6K

Steps to reproduce

Create 4 components, each a child of the other.
App -> 1 -> 2 -> 3 -> 4

App and Component 1 each provides a unique value for the key "test" on first render. When Component 2 is re-rendered provide a unique value for the key "test".

What is expected?

It should be expected that Component 4 inherits the new provided value of Component 2, but instead only Component 3 inherits.

What is actually happening?

When provide() is called, it creates a new Object with the prototype of the previous parent's providers, however when this is done in overlap like it is here, it skips one.

First Render:

• Component 1 has Object.create(App.provides)
• Component 2 has Component 1's provides
• Component 3 has Component 2's provides (which is Component 1's provides)
• Component 4 has Component 3's provides (which is Component 1's provides)

Second Render:

• Component 1 has Object.create(App.provides)
• Component 2 has Object.create(Component 1.provides)
• Component 3 has Component 2's provides
• Component 4 has Component 3's old provides (which is Component 1's provides) [Note: Here lies the issue.]

System Info

Any additional comments?

No response

[edison1105]

a workaround:

// in Comp3.vue
onBeforeUpdate(() => {
  data.value = inject("key");
  provide("key", data.value);
})

[benjamin-larsen]

There are two solutions as I see:
A) Object.create, capture parent prototype immediately when Component Instance is created.
B) Update prototype on every rerender.

I can make pull requests for both of these.

[skirtles-code]

I don't think calling provide inside a lifecycle hook is supported. It may work in some cases, but I think that's by chance rather than by design. The provided values are expected to be locked in by the time the component renders.

This is touched upon in the docs, though maybe not as explicitly as it could be. e.g.:

https://vuejs.org/api/composition-api-dependency-injection.html#provide

Similar to lifecycle hook registration APIs, provide() must be called synchronously during a component's setup() phase.

https://vuejs.org/guide/components/provide-inject.html#provide (with API toggle set to Composition)

If not using <script setup>, make sure provide() is called synchronously inside setup():

It doesn't explicitly explain how it works with <script setup>. I believe in that case it either needs to be called synchronously or after a top-level await with Suspense.

I wonder whether we could/should add better warnings to provide to avoid this kind of usage?

[benjamin-larsen]

It should be supported now by my PR, but my PR does not resolve the issue of provide() inside of render (which would need to be resolved by using currentRenderingInstance). Generally you wouldn't need to do anything except return VNode tree in render

[edison1105]

The current reproduction works because onBeforeMount and onBeforeUpdate are executed synchronously.

[benjamin-larsen]

Right because in async, the currentInstance would be unset by time it's executed, because Microtasks (which async is ran) can only be run when current Execution Task is finished, and hence the currentInstance is reset.

The solution would be to have a function of component public instance where you can provide and inject.

[benjamin-larsen]

@edison1105 I could probably make a component instance method (like $forceUpdate) for $provide and $inject that would work async.