Search code examples
javascriptvue.jsnuxt.jsvitest

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') - router.push({})

I have recently upgraded my dependencies and now every time I click on my button to navigate to the next page (and thus triggers router.push({ path: getBaseRoute("next-route") }) it throws the error Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode'). I understand what the error means, but logging the router, I notice router isn't null. When I refresh the page however, the router succeeds in navigating me to the next page.

This is the part which causes the error:

    const router = useRouter();

    return await api
        .getByPostalCode(params)
        .then((response: PostalCodeResult) => {
            result.value = response;
            router.push({ path: getBaseRoute('next-route') });
        })
        .catch((error) => {
            return Promise.reject(error);
        });
}

Removing the router.push part, removes the error as well. Logging the flow I can confirm I also get in the then successfully.

Dependency versions I am running:

"vitest": "^1.0.4",
"nuxt": "^3.9.1",
"nuxt-vite": "^0.3.5",
"@pinia/nuxt": "^0.5.1",

if any other dependency version is required, please say so.

Solution

  • In order to resolve the error you should put a <div></div> around the NuxtLayout. See the following as reference: https://github.com/nuxt/nuxt/issues/13309