CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
miki
miki

Reputation: 31

vue + nuxt: dynamic import of route pages fails at render

I'm trying to speed up the loading of our vue/nuxt application. I follow the nice idea of splitting routing page into asynchronous loading as in https://router.vuejs.org/guide/advanced/lazy-loading.html

This means mainly turning

import Contact from '@/components/pages/Contact'
...
Router({
    routes: [
        {
            path: __('route_contact'),
            name: 'contact',
            component: Contact
        },

into

const Contact = () => import('@/components/pages/Contact');
...
Router({
    routes: [
        {
            path: __('route_contact'),
            name: 'contact',
            component: Contact
        },

But it unfortunately fails.

The preparation process via nuxt build and nuxt start proceeds normally, the small chunks are generated and packaged and server starts.

However when I try to render this page via front side (using internal link) there's no output, and when I do reload of the page in question (triggering SSR) I get server error with the following output of nuxt start:

{ Error: render function or template not defined in component: anonymous
at normalizeRender (/var/www/site/front/node_modules/vue-server-renderer/build.js:7396:13)
at renderComponentInner (/var/www/site/front/node_modules/vue-server-renderer/build.js:7520:3)
at renderComponent (/var/www/site/front/node_modules/vue-server-renderer/build.js:7491:5)
at renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7407:5)
at renderComponentInner (/var/www/site/front/node_modules/vue-server-renderer/build.js:7527:3)
at renderComponent (/var/www/site/front/node_modules/vue-server-renderer/build.js:7491:5)
at renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7407:5)
at renderComponentInner (/var/www/site/front/node_modules/vue-server-renderer/build.js:7527:3)
at renderComponent (/var/www/site/front/node_modules/vue-server-renderer/build.js:7491:5)
at RenderContext.renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7407:5)
at RenderContext.next (/var/www/site/front/node_modules/vue-server-renderer/build.js:2428:14)
at RenderContext.next (/var/www/site/front/node_modules/vue-server-renderer/build.js:2441:12)
at RenderContext.cachedWrite [as write] (/var/www/site/front/node_modules/vue-server-renderer/build.js:2287:9)
at RenderContext.next (/var/www/site/front/node_modules/vue-server-renderer/build.js:2432:16)
at RenderContext.cachedWrite [as write] (/var/www/site/front/node_modules/vue-server-renderer/build.js:2287:9)
at RenderContext.renderNode (/var/www/site/front/node_modules/vue-server-renderer/build.js:7415:15) statusCode: 500, name: 'NuxtServerError' }

Does anybody have any idea what to do?

Upvotes: 3

Views: 2284

Answers (1)

Jan Holas
Jan Holas

Reputation: 278

I know it's a bit outdated post, but if anyone still stumbles upon this as I did looking up the same problem, I solved it by using the same mechanism as nuxt.js default generated router does, wrapping the component dynamic import as follows:

function interopDefault(promise) {
  return promise.then(m => m.default || m);
}

const HomeIndex = () => interopDefault(import('@/pages/home/index.vue'));
const HomeAboutUs = () => interopDefault(import('@/pages/home/about-us.vue'));

Upvotes: 7

Related Questions