Teleport Error "Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null"

Hi,

I’m trying to use the feature of Vue3, but I’m getting an error when trying to use it to move an element on the page. I can use it to teleport to the body without issue, but when I try to send it where I want it (to=".suggestions") it errors…

Uncaught (in promise) TypeError: Cannot read property ‘parentNode’ of null

I expect I’m missing something obvious here.

<section id="section-one" class="section">
    <div>
        <teleport to=".suggestions">
                <span
                v-if="questionErrorPopup && userAnswer != answer && userAnswer != ''"
                v-html="errorMessage"
                class="error-message"></span>
        </teleport>
    </div>
</section>

Then in another hidden part of the app (via v-show)…

<section id="summary" class="section">
    <div class="summary-results summaries--not-okay" v-show="getErrorState">
            <div class="suggestions">
                <!-- Teleport should go here -->
            </div>
    </div>
</section>

Can anyone help me, please?

Thanks

hi,
im using the old version of this package so im not sure of my answer.
can you give it an id instead of class and try againg?

@yos Thanks for the quick reply. Unfortunately, I tried that with no luck. I get the same error message.

I can tell it to teleport to anything outside (ie body) and including #app, but anything within it gives me that error. It doesn’t matter if it is an id or class name.

I don’t think this is officially supported:

https://github.com/vuejs/vue-next/issues/2015

That said, it seemed to work for the simple test case I put together based on your code:

https://jsfiddle.net/skirtle/tp6307L8/3/

I used a mounted hook to ensure the target was rendered before the <teleport>. Even without that I saw a warning and not the error you reported.

well sorry for long time answering…
i cant debug it sorry, i dont have a lot of time but for now i would suggest:

it works in our projects, and after vue’s portals are stable you can switch in 1 min :slight_smile:

@yos Thanks for the reply. I spotted that too. Unfortunately, it’s not Vue3 ready :frowning: https://github.com/LinusBorg/portal-vue/issues/300

@skirtle Thanks for the tip by using mounted() I’ve had to change your code a little as I have that component separate to the where the teleport is moving to. I’m using VueX so I added the ‘ready’ state to that. Then I changed the if statement to check against that and it seems to work!

Thanks to both of you with your help.