Problem of not reading parent node when rendering child components through render(h) function
Vue version
^3.2.47
Link to minimal reproduction
Steps to reproduce
(Please understand that English sentences are not smooth because I used a translator.)
I made a container component. The component uses a generic script tag and async setup function (I found out this was a problem!). It receives data by performing API communication within the setup function. Problem occurs when rendering child components while lowering the data to props through the h function.
What is expected?
Child components should be rendered normally.
What is actually happening?
It does not render normally, and the console displays the error "Type Error: Cannot read properties of null (reading 'parentNode'). If this problem occurs, it does not render normally when routing to other routes.
System Info
No response
Any additional comments?
No response
I removed async from the setup function and created a separate function, and it works fine. It's resolved!
export default {
setup() { // remove async
...
const loadData = async () => {
await fetchSomething();
};
loadData();
}
...
};
But I want to know why(I'd like to know the details) 😖
Components with an async setup only work when they are descendants of a Suspense component, because that Suspense component essentially awaits the async setup