vuejs
Broken Navigation in Nuxt 3.12.2 - Uncaught (in promise) TypeError: Cannot redefine property: __navigationId at Function.defineProperty (<anonymous>)
Operating System: Linux - Ubuntu "packageManager": "[email protected]", "volta": { "node": "20.11.0" } "engines": { "node": ">=20.11.0" }, "devDependencies": { "@nuxt/devtools": "latest", "@nuxt/kit": "^3.12.4" }, "dependencies":{ "nuxt": "^3.12.4", "vue": "^3.4.21" },
DESCRIPTION:
After moving to Nuxt 3.12.4 version, we occasionally encounter a navigation_id error in our console. It is unclear to our whole development team what the issue's source is. Here is the screenshot of it.
Developers raised an issue with Nuxt, but we received information that it is related to VueDevtools. Can you please check this?
I also encountered a similar error. Because it only appears occasionally, it's tough to provide something clear like a mini repo.
Can you try to provide a mini repo 🙏?
It is very difficult to create a mini-repo for this issue, been trying so far without success.
I managed to reproduce the issue multiple times, and I have included videos below to demonstrate.
-
Video 1: https://streamable.com/azg5k5
In this video, you can see the logged navigation object, which shows that the route didn’t change. When attempting to navigate to the channel details, the navigation issue persisted, preventing access to the channel details page. -
Video 2: https://streamable.com/vcnt2l
In this video, I had to completely close the browser (simply closing Vue DevTools didn’t help). After restarting the browser, I was able to access the application again, and the issue no longer occurred. Additionally, the logged 'from' object shows that the route didn’t change, and no code changes were made in my project.
Steps to Reproduce:
- Start the project:
yarn dev - Open Firefox browser
- Go to
localhost:3000 - Open the inspect tool in a separate window with the latest Vue.js DevTools extension installed
- Attempt to access any channel
- Observe the logs, where errors will appear