Uncaught TypeError: Cannot read properties... (fresh install)

[gbplabs]

Hi!
Fresh install,
On a Mac with Node.
The same thing happens to me with Node 22 and 20 and I guess with others too.

I installed with: npx nuxi init -t github:nuxt-ui-pro/dashboard
Then... pnpm run dev

I log in to localhost:3000
For example, I go to the "inbox" page and make an important change in the js code, for example on line 28 we have

const filteredMails = computed(() => {
    if (selectedTab.value === 1) {
        return mails.value.filter(mail => !!mail.unread)
    }

I change the ===1 to ===100

then... cmd + s to save and....

If I look at the browser console I find the blessed: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

I made this reproduction of the error because I have been suffering from it, in a complex project in which I'm working, and I was actually suspecting that it might have been some external module of the many that I installed, so I resorted to a fresh installation and found out that the same thing is happening.

I would appreciate any comment, since this takes up a lot of time in my workflow, since it reloads the entire page with each cmd + s.

Greetings from Argentina.

Pablo

[gbplabs]

I'm answering myself in case it helps anyone.

Summary:
I encountered an error during hot reload with the Nuxt UI Pro Dashboard template. The error was related to accessing a null parentNode, which caused an unhandled exception during component updates. After some investigation, I found that the issue can be resolved by forcing a full remount of the page component when the route changes.

Solution:
In app.vue, simply add the :key="$route.fullPath" attribute to . This ensures that Vue fully remounts the component whenever the route changes, thereby preventing any DOM inconsistencies that lead to the error.

This small change solved the hot reload issue without having to resort to a full page reload, allowing for a smoother development experience.

By adding :key="$route.fullPath" to , we force Vue to fully remount the component every time the route changes. While this effectively resolves the hot reload issue, there are a few potential trade-offs to be aware of:

1.	Loss of Local State:

Any state that is local to the component (e.g., data, computed values, or reactive properties that haven’t been stored in a global store) will be reset on each route change. This might not be a problem in many cases, but if your components are designed to preserve certain states, they will lose that state upon remount.

2.	Performance Considerations:

Forcing a full remount can have a slight performance overhead, especially if the page components are heavy or if there are frequent route changes. The remount process means that the component’s lifecycle hooks are re-triggered, which might impact performance in more complex scenarios.

3.	Side Effects on Animations or Transitions:

If your application relies on smooth transitions or animations during route changes, a full remount might interrupt or reset these transitions. This can lead to a less seamless user experience in some cases.

4.	Unexpected Behavior with Persistent Components:

In cases where you rely on caching or persistent state between route changes (for example, using ), forcing a remount bypasses those optimizations. This might not be an issue during development, but it’s something to consider for production scenarios where state persistence is important.

SPECIAL THANKS TO o3-mini-high :)

Pablo