NuxtJs: ReferenceError: NuxtError is not defined

Question

I am new to NuxtJs. 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 <Root>)

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(sceenshot).

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.

Answer 1

define your error page.

create this file: layouts/error.vue

<template>
  <div class="container">
    <div v-if="error.statusCode === 404">
      <h1>Page not found</h1>
      <p>{{ error.message }}</p>
    </div>
    <div v-else>
      <h1>An error occurred</h1>
    </div>
    <n-link to="/">Home page</n-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'default' // If you prefers you can set a custom layout for the error page
}
</script>

More info: check the nuxt docs about error page