Nuxt.js: NuxtJs: ReferenceError: NuxtError is not defined

[mauchchhash]

I am learning nuxt and my fresh project is generated with the 2.14.5 nuxt version. I wanted to test how nuxt-link works so I intentionally put a nuxt-link to a route that doesn't work hoping to get redirected to the default 404 page. I put this line the pages/index.vue file:

<nuxt-link to='/asksdkjd'>ssss</nuxt-link>

And it displays in chrome like this:

After I click the link I get these error in console:

`ReferenceError: NuxtError is not defined
at Vue.errorChanged (App.js?efe7:173)
at Watcher.run (vue.runtime.esm.js?2b0e:4568)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in watcher with expression "nuxt.err"
(found in )`

Here's the error screenshot This error shows when I am redirected to the link because you can see the invalid link in the url bar. It doesn't render the default 404 page. But When I hit refresh, I can then see the 404 page( screenshot ).

Here's my nuxt.config.js file which was generated when I installed this fresh project.(I ommited the comments.)

export default {
  mode: 'universal',
  target: 'static',
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: [
  ],
  plugins: [
  ],
  components: true,
  buildModules: [
  ],
  modules: [
  ],
  build: {
  }
}

I have been googling for this error for quite a while but couldn't find anything. I also tried in firefox but the same issue is happening. Hope you guys can help. Thanks in advance.

[azrikahar]

CodeSandbox link for this issue

Screenshot of this issue in the CodeSandbox console error

We can see the Sandbox is using Nuxt v2.14.5 (on the left sidebar under Dependencies) and the route shows that we are browsing https://sipyl.sse.codesandbox.io/non-existent-page, but it doesn't show the 404 page to us.

Context

I was also facing this issue recently and I believe it didn't exist before 2.14.5 (I might be wrong), hence I'm adding on supporting info to this thread.

[azrikahar]

Did some digging and seems like my impression is correct as in this didn't exist before 2.14.5. This bug is introduced by this PR #8016 (included in 2.14.5) over here in the App.js file:

https://github.com/nuxt/nuxt.js/blob/45b7838710a60dba6740a95f6782429ad70d5010/packages/vue-app/template/App.js#L216-L238

where NuxtError was never imported due to the condition not met over here:

https://github.com/nuxt/nuxt.js/blob/45b7838710a60dba6740a95f6782429ad70d5010/packages/vue-app/template/App.js#L15

I believe the contributor was following the same logic over the client.js file that they also modified over here:

https://github.com/nuxt/nuxt.js/blob/45b7838710a60dba6740a95f6782429ad70d5010/packages/vue-app/template/client.js#L616-L633

However the reason why the client.js file can use NuxtError is because the condition is different from App.js's NuxtError, as seen here:

https://github.com/nuxt/nuxt.js/blob/45b7838710a60dba6740a95f6782429ad70d5010/packages/vue-app/template/client.js#L20

Hence this might be an oversight in the PR.

Pinging @pi0 since the PR was merged recently and I feel like this might need more attention as it's easily reproducible.

[msonowal]

commenting for support as this breaks the error rendering mechanisms

[u007]

how to get this update?

[pi0]

Hi. This issue should be fixed with 2.14.6. Sorry for inconveniences.

[codesxt]

For the record, I was also having this same error with Nuxt version 2.14.3 when using a parameterized route (_id.vue) next to an index.vue one. When moving from index.vue to the _id.vue I got an error mentioning a possible loop, but after a while it still loaded my data.

Updating to 2.14.6 solved the problem.

[Kolobok12309]

@azrikahar, yea, you are right about logic for PR, my fail i not test on this use case.