Nuxt.js: Errors become "render function or template not defined in component: anonymous" after refresh

Created on 7 Feb 2018  路  11Comments  路  Source: nuxt/nuxt.js

I'm finding that whenever I get a build error when running the development server, I initially see the correct error when loading the page for the first time. However, when I refresh the error page, the error always becomes:

render function or template not defined in component: anonymous

thrown by normalizeRender.

Seems related to #2576, but I'm on the latest version of vue-cli...

Steps to reproduce

This happens on a fresh Nuxt app for me:

  1. vue init nuxt-community/starter-template test (default values for all)
  2. cd test/, npm install and npm run serve
  3. Introduce an error, e.g. in index.vue change
import AppLogo from '~/components/AppLogo.vue'

to:

import AppLogo from '~/components/ZppLogo.vue'
  1. Load index and see correct error
  2. Refresh and see render function or template not defined in component: anonymous.

Versions

  • Node 8.9.4
  • Vue 2.5.13
  • vue-cli 2.9.3
  • Nuxt 1.3.0

Stack trace

Correct error, 1st request:

This dependency was not found:

* ~/components/ZppLogo.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/Users/alex/Documents/test/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

To install it, you can run: npm install --save ~/components/ZppLogo.vue
  nuxt:render Rendering url / +19s
{ Error: Cannot find module "~/components/ZppLogo.vue"
    at Object.50 (pages/index.vue?a4bb:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 81e5a0b8b0df574f1d45:25:0)
    at Object.48 (pages/index.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 81e5a0b8b0df574f1d45:25:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) statusCode: 500, name: 'NuxtServerError' }

After a refresh:


  nuxt:render Rendering url / +2s
  nuxt:render Data fetching /: 0ms +0ms
{ Error: render function or template not defined in component: anonymous
    at normalizeRender (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7231:13)
    at renderComponentInner (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7355:3)
    at renderComponent (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7326:5)
    at renderNode (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7242:5)
    at renderComponentInner (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7362:3)
    at renderComponent (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7326:5)
    at renderNode (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7242:5)
    at renderComponentInner (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7362:3)
    at renderComponent (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7326:5)
    at RenderContext.renderNode (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7242:5)
    at RenderContext.next (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:2382:14)
    at cachedWrite (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:2242:9)
    at renderElement (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7463:5)
    at renderNode (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7244:5)
    at renderComponentInner (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7362:3)
    at renderComponent (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7326:5)
    at RenderContext.renderNode (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7242:5)
    at RenderContext.next (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:2382:14)
    at cachedWrite (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:2242:9)
    at renderElement (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7463:5)
    at renderNode (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7244:5)
    at renderComponentInner (/Users/alex/Documents/test/node_modules/vue-server-renderer/build.js:7362:3) statusCode: 500, name: 'NuxtServerError' }

Thanks in advance for any help 鈽猴笍 !

This question is available on Nuxt.js community (#c2421)
bug-report
Source
picture alexpeattie
👍17

Most helpful comment

this problem may be caused by empty v-bind attr

picture zhangmoumou on 8 Oct 2018
👍2

All 11 comments

I also had this error. In my case i just have returned nuxt version from 1.4.0 to 1.0.0.

andreevsm picture andreevsm on 29 Mar 2018

I got the same error.
nuxt 1.4.0

areyouse7en picture areyouse7en on 31 Mar 2018

Same situation.
In nuxt 1.0.0 -> 1.4.0 it behave like this.

aldarund picture aldarund on 2 Apr 2018

Happens in nuxt-edge too.
@Atinux Is there any plans to fix this?

aldarund picture aldarund on 7 May 2018

I'm getting the same error. Any update on how to fix it?

hasib32 picture hasib32 on 11 May 2018

Me too. But switching to 1.0.0 does not solve it.

Mine was in a function that generates and returns a computed property.

I set a variable to null on purpose to test some other weird Nuxt error stuff out, and got this.

 DONE  Compiled successfully in -7775ms                                                                                                                                                            18:00:17


 OPEN  http://localhost:3000

  nuxt:render Rendering url / +0ms
STORE FILE LOADED!
PLUGINS LOADED!
CREATE STORE!
Unable to add computed property
{ TypeError: Cannot read property 'baz' of null
    at foo (services/utils.js:3:0)
    at Object.58 (components/HelloWorld.vue?e6f2:18:0)
    at __webpack_require__ (webpack:/webpack/bootstrap c483baef4b587f681403:25:0)
    at Object.61 (components/HelloWorld.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap c483baef4b587f681403:25:0)
    at Object.57 (pages/index.vue?b3c8:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap c483baef4b587f681403:25:0)
    at Object.54 (pages/index.vue:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap c483baef4b587f681403:25:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) statusCode: 500, name: 'TypeError' }
  nuxt:render Rendering url / +2s
CREATE STORE!
CREATE STORE!
NUXT_SERVER_INIT!
  nuxt:render Data fetching /: 3ms +0ms
{ Error: render function or template not defined in component: anonymous
    at normalizeRender (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7396:13)
    at renderComponentInner (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7520:3)
    at renderComponent (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7491:5)
    at renderNode (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7407:5)
    at renderComponentInner (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7527:3)
    at renderComponent (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7491:5)
    at renderNode (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7407:5)
    at renderComponentInner (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7527:3)
    at renderComponent (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7491:5)
    at RenderContext.renderNode (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7407:5)
    at RenderContext.next (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:2428:14)
    at cachedWrite (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:2287:9)
    at renderStringNode$1 (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7602:5)
    at RenderContext.renderNode (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:7405:5)
    at RenderContext.next (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:2428:14)
    at RenderContext.cachedWrite [as write] (/Volumes/Data/Work/OpenSource/JavaScript/VuexPathify/vuex-pathify-demos/nuxt/node_modules/vue-server-renderer/build.js:2287:9) statusCode: 500, name: 'NuxtServerError' }
davestewart picture davestewart on 12 May 2018

+1. The error is shown whenever JS encounters any error. In my case I do
throw new Error('any error here') and get, any error here error message, and then this weird render function or template not defined in component: anonymous, even if I reload page.

anurbol picture anurbol on 18 Jun 2018

Had the same issue. Running npm run dev again solved it and further changes will be applied.

svnba picture svnba on 14 Aug 2018

@Atinux I've traced this all the way up to renderComponent in vue-server-renderer. The first time the request hits, the "weird render error" (render function or template not defined in component: anonymous) is already thrown, a cache entry is made for it but it's caught by the webpack error handler. The second time, the original cached error response is delivered straight away. If I'm right (and I may very well not be :)), this means vue-server-renderer needs to cache the first error handler response. I do know for sure now that this doesn't happen in Nuxt but rather in the vue-server-renderer pipeline.

galvez picture galvez on 26 Aug 2018

this problem may be caused by empty v-bind attr

zhangmoumou picture zhangmoumou on 8 Oct 2018
👍2

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 7 Nov 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

danieloprado picture danieloprado  路  3Comments
o-alexandrov picture o-alexandrov  路  3Comments
msudgh picture msudgh  路  3Comments
uptownhr picture uptownhr  路  3Comments
mikekidder picture mikekidder  路  3Comments