"Maximum call stack size exceeded" in Nuxt/Content-CodePudding

I've tried setting up a very simple nuxt content example, but even for that I'm running into an Maximum call stack size exceeded error when opening localhost:port/

pages/_slag.vue:

<template>
    <nuxt-content :document="doc" />
</template>

<script>
export default {

    async asyncData({ $content, params }) {
        const doc = await $content(params.slug || 'index');

        return { doc }
    }
    
};
</script>

content/index.md:

# Hello @nuxtjs/content!

Super fast HMR!

nuxt-config.js:

export default {
  vue: {
    config: {
      // https://vue-loader.vuejs.org/options.html#cachedirectory-cacheidentifier
    },
  },
  target: 'static',    
  
  buildModules: [
  ],
  modules: [
    '@nuxt/content'
  ],
  content: {
  },   
  build: {
  },
  generate: {
    concurrency: 2000,
  }
}

package.json:

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "@nuxt/content": "1.14.0",
    "core-js": "^3.18.0",
    "nuxt": "^2.15.8",
    "vue-inline-svg": "^2.0.0"
},
"devDependencies": {
    "@vue/test-utils": "^1.2.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.0.5",
    "jest": "^27.0.5",
    "postcss": "^8.3.5",
    "vue-jest": "^3.0.4"
},
"optionalDependencies": {
    "fsevents": "^2.3.2"
}

What am I doing wrong?

CodePudding user response：

You are not fetching the data you query for. Update your $content to be as follows: $content(params.slug || 'index').fetch()