nuxt-community / router-module

Nuxt 2 module to use router.js instead of pages/ directory.
MIT License
401 stars 28 forks source link

Hydratation error with SSG #98

Closed blaadje closed 3 years ago

blaadje commented 3 years ago

Hey ! I've been converting my app from nuxt automatic routing to this module so I can have more freedom with routes (in static generation mode) and got an error while accessing pages.

TypeError: undefined is not an object (evaluating 'c.fetch[this._fetchKey]') — 

Which seems to appear in here https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/mixins/fetch.client.js#L41

I might be wrong but I think it's coming from data hydratation between the cdn page's content & client. I made a test with a simple component with asyncData

<template>
  <div>{{ i18n }}</div>
</template>

<script>
export default {
  asyncData() {
    return {
      i18n: {
        foo: 'bar',
      },
    }
  },

& that's the result from the page

image

As you can see window._NUXT_ doesn't contain data.

This is my conf

// nuxt.config.js
buildModules: [
  [
    '@nuxtjs/router',
    {
      path: './core/',
      fileName: 'router.js',
    },
  ],
],
generate: {
  routes: [
    ROUTES.payments.path,
    ROUTES.login.path,
    ROUTES.informations.path,
    ROUTES.deliveries.path,
    ROUTES.companions.path,
  ],
},

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import { ROUTES } from './routes'

Vue.use(Router)

const createRoutes = () => {
  return Object.values(ROUTES).map((route) => {
    return { ...route, pathToRegexpOptions: { strict: true } }
  })
}

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: createRoutes(),
  })
}

// routes.js
import { importDefault } from './utils'

const index = () => importDefault(import('@/pages/index'))
const payments = () => importDefault(import('@/pages/payments'))

export const ROUTES = {
  homePage: {
    path: '/',
    component: index,
  },
  payments: {
    path: '/payments/',
    name: 'payments',
    component: payments,
  },
  // etc.
}
"@nuxtjs/router": "^1.5.1",
"nuxt": "^2.14.6",

Am I doing something wrong ? Would love to have your feedback quickly as this bug is pretty annoying for us. 🙏 Thanks !

blaadje commented 3 years ago

Alright by putting the lib in devDependencies & re-installing it works 🤔 Not sure what happened 😅