TypeError: Cannot read properties of null (reading 'parentNode') #13309
Comments
nurdism
changed the title
|
Don't now if it is helpful, but I experienced some similar errors while developing our app. In the end it was caused by a transition component as the root component in the template. Navigating between routes sometimes caused the Also our pages setup looks a lot like yours, so maybe it is helpful :-) |
|
@rvmourik is on the right track, I went ahead and recreated the |
I did the exact same thing to work around the error, it might be related to the combination of dynamic routes and nested pages. |
|
I too face the same problem, i did created a Is this vue bug? |
|
The original reproduction now longer gives this error, when wrapping <template>
+ <div>
<NuxtPage />
+ </div>
</template> |
|
Yes, I was having my code like this <template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>Wrapping the |
|
@danielroe @anburocky3 I ran into this problem too, adding div wraps to NuxtPage didn't fix it either. Router. push or NuxtLink can be used to jump to the page normally. However, if you jump to the page after refreshing the browser, a parentNode problem will occur. Finally, refresh the browser to display the page. |
Any reproduction steps? Try to upgrade to nuxt3 latest and retry it. |
I'm using the latest version of Nuxt3, which I suspect is due to useLazyAsyncData. When I used Axios, I get a 500 error when I refreshed the page. To solve this problem, I used useLazyAsyncData to get the request data, but after refreshing the page, I couldn't redirect the route. |
Finally, I close SSR and solve this problem. |
|
My local works fine, but when I deploy on dev(firebase), I got the same error whenever I route to another page. |
i am using nuxt3 but i am still getting this error |
|
i created a new nuxt application and transferred my files to the new application following the rules from the nuxt3 docs. problem fixed. |
how ? |
make sure when a component like |
In my case this bug occurs when switching between pages with different layouts defined in |
|
Same issue. Wrapping Dynamic routes in question look like this:
Parent page has I can navigate to the dynamic route twice, then on the third time, I get the |
|
try wrapping all the elements on the page in one single element |
|
I am getting excaly the same error when try to navigate between routes. All my pages have this structure: |
|
I am also having this error, was there any resolution reached? my and my <v-app>
<Header />
<v-main>
<v-container class="my-4">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</v-container>
</v-main>
<Footer />
</v-app>When I generate my app ( |
|
Any news on this? I'm having the same exact error in my Nuxt3 RC 6 app |
|
In RC 8 still the same problem |
|
apart from this solution provided by @danielroe ...
... i found that components having another component as their root-element also was cause of this problem. wrapping these with a html-element (e.g. |
|
Fixed with : |
This was it for me as well, I had a root |
|
This error happens again after upgrade vue from 3.4.1 to 3.4.15. Happens when changing routers. 
|
|
@HADB There was no problem in my tests, there may be a different event in your code, this parent node error was occurring in continuous request in data fetching operations, they closed this situation with version 3.4 |
@tolgahanbeyazoglu Thanks for replying. I found my problem is linked to this issue(#25214) which seems the same error but diferrent situation. |
|
@HADB yes not the same problems yours diffrerent problem |
This worked for me as well, but resulted in a blank page between transition. Finally I wrapped all of the |
|
By playing around with my routeRules: {
'/': { prerender: true },
'/theme/**': { prerender: true },
'/articles/**': { prerender: true },
'/administrator/**': { ssr: false },
'/api/**': { cors: true, ssr: false },
},
nitro: {
prerender: {
routes: ['/', '/articles/**', '/theme/**'],
},
},Not sure if it'll be helpful to others so just giving it a shot. I had to use |
|
Using the specified vue3.4.8 can solve the problem for me, but if not, the problem still exists. Can we solve the problem at its root? |
This comment was marked as off-topic.
This comment was marked as off-topic.
Has it been settled at last |
|
Worked for me: |
|
i was dealing with the same issue. None of the mentioned workarounds fixed it for me. |
|
I also was dealing with this issue, fixed it wrapping all the
|
|
Hi all. I had a problem when navigating between pages with changing layouts. |
|
Hi all, Has anyone definitely solved this problem? |
|
We also are still affected by this problem and would like to see this issues re-opened. Nuxt 3.10.1 is not a fix for this issue. Tips like adding extra <div>s or changing the HTML structure with a different layout and so on are non-solutions for us because we don't want to change the source code we want to have as a replacement for a problem fix (combat symptoms). Out tests strengthen the hypothesis that the Vue.js core library is the culprit. Is this problem known to the Vue.js folks and is that problem on their roadmap already? |
This is still a Vue upstream bug and not a Nuxt issue. |
helo @nurdism is your problem solved.? if yes, how to solve this problem.? i found this problem now, and hasn't solved long time... pleas tell me how to solve this problem if you don't mind... |
|
@Jupriadi Adding vue v3.4.8 solved it in my case |
That really helped! |
This one worked for me. Thanks! |
|
@Jupriadi Thanks for your solution. It worked <3 |
|
FYI all: Vue v3.4.20 has released with this bug fixed. |
|
I'm still experiencing this issue on the latest Nuxt v3.10.3 and Vue v3.4.21. The issue seems to only appear when navigating to dynamic pages. Edit: My issue was caused by loading remote data via |
**helped for nuxt 3.10.2 **брат ты легенда |
To clarify: wrapping <template>
<NuxtLayout>
<div>The contents</div>
</NuxtLayout>
</template>But this: <template>
<div>
<NuxtLayout>The contents</NuxtLayout>
</div>
</template>I.e. you need to wrap the |
and others
Environment
Linuxv14.18.13.0.0-27389502.88da719yarn@1.22.17Vitessr--Reproduction
use this sandbox, Visit
${url}/organization/365824000000000003/template/newclick on the "a" link then the "b" link and this error is thrown:Describe the bug
hooks
page:startandpage:finishdon't seem to fire on pages${url}/organization/*and an error is thrown when usingawaitin the<script setup>and then navigating to a new page.I don't know if this is due to the page structure or the the way the pages are set up. It's taken me all day to get this error to reproduce and the only way I've gotten this to throw is with this folder structure and by
<script setup>Additional context
No response
Logs
No response
Tasks
The text was updated successfully, but these errors were encountered: