Vercel deployments broken if @nuxt/content module is included (spa/static and SSR configs)

TL;DR - create a bare bones app using yarn create nuxt-app and include the @nuxt/content module. Deploy it to Vercel and the page errors out. This applies to every type of configuration, whether the target is static/server and whether SSR is on/off.

Static bug repo: https://github.com/nakedgun/nuxt-content-ssr-bug/tree/static SSR bug repo: https://github.com/nakedgun/nuxt-content-ssr-bug/

Both repos are basic apps created using yarn create nuxt-app. For reference:

1. yarn create nuxt-app
2. Include the nuxt content module when prompted
3. yarn add @nuxtjs/vercel-builder
4. nuxt.config.js

  ssr: false,
  target: 'static',

Deploy to Vercel / view page. Result: white page and error in console:

Different example with target = server | SSR = true and including serverFiles within vercel.json

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt-content-bug',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  ssr: true,
  target: 'server',

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en',
    },
  },

  // Content module configuration: https://go.nuxtjs.dev/config-content
  content: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
}

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": [
          ".nuxt/content/**",
          "content/**"
        ],
        "internalServer": true
      }
    }
  ]
}

Result: Nuxt Internal Server Error

Vercel serverless error log:

ERROR  inject('content', value) has no value provided  at inject (.nuxt/index.js:141:0)  at plugin_server (.nuxt/content/plugin.server.js:9:0)  at createApp (.nuxt/index.js:191:0)  at async module.exports.__webpack_exports__.default (.nuxt/server.js:82:0)

Package.json

{
  "name": "nuxt-latest",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxt/content": "^1.11.1",
    "@nuxtjs/axios": "^5.12.5",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/vercel-builder": "^0.18.1",
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12",
    "nuxt-buefy": "^0.4.4"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.5.0",
    "prettier": "^2.2.1"
  }
}

It’s worth noting that you don’t need any definition of the nuxt content module within nuxt.config.js or a vercel.json config to cause the problem. Simply having @nuxt/content in your package.json seems to break the builds. Everything works fine locally or when run via node/nginx.

Related:

https://github.com/nuxt/nuxt.js/issues/8129 https://github.com/nuxt/content/issues/144#issuecomment-757532434 https://github.com/nuxt/vercel-builder/issues/328

[dolbex]

@danielroe - thanks again so much for all the extra effort. Really appreciate it! Hopefully, I can buy you a beer post Covid at a conference. Cheers!

[danielroe]

@nakedgun Worth saying I retried your repo, upgrading Nuxt and doing what @dolbex did (clearing node_modules and lockfile) and it seems to be working fine for me. Likely an issue with a dependency that just needed to be upgraded.

Let me know if that doesn’t solve it for you and I’ll reopen.