Nuxt.js: Nuxt Programmatic: Renderer is loaded but not all resources are unavailable! Please check ...

[nikkwong]

Version

v2.6.2

Reproduction link

https://xxx.com

Steps to reproduce

Hey, bare server and running into this issue when running nuxt programmatically:

server.js

const { Nuxt, Builder } = require('nuxt'),
  config = require('./nuxt.config'),
  app = require('express')();


const nuxt = new Nuxt({...config, ...{ dev: !isProd }})
app.use(nuxt.render)
if (!isProd) {
  const builder = new Builder(nuxt)
  builder.build()
}
app.listen(3000)

I run nuxt build which results in entrypoint files: Entrypoint app = 32847580a74f1882ab1a.js 627079640005b2aff141.js ff5b142fabf2940dccee.js cb8be830c6794eb9ee84.js which.. are somewhat meaningless to me, I'm guessing they're handled internally (?).

I then run:
NODE_ENV=production node server.js, and try to navigate to localhost:3000/

The error occurs:

Renderer is loaded but not all resources are unavailable! Please check /.nuxt/dist/server existence.
I can confirm that a server folder exists. Am I doing anything obviously stupid? Thank you.

What is expected ?

The page should render.

What is actually happening?

An error is thrown.

_{This bug report is available on Nuxt community (#c9064)}

[pi0]

Hi. Can you please share nuxt.config? Also please ensure 2.6.2 is installed by checking node_modules/nuxt/package.json

[nikkwong]

Heya, sure, I'm on 2.6.2

Here's the config:

require('app-module-path').addPath('./');
const session = require('express-session'),
  MongoStore = require('connect-mongo')(session),
  mongoose = require('mongoose'),
  routes = require('./routes'),
  path = require('path')

module.exports = {
  serverMiddleware: [
    session({
      secret: 'abc',
      cookie: { maxAge: 6000000000, secure: process.env.NODE_ENV == 'production' },
      saveUninitialized: true,
      store: new MongoStore({
        mongooseConnection: mongoose.connection,
        autoRemove: 'interval',
        autoRemoveInterval: 3600000
        })
    }),
    { path: '/', handler: routes }
  ],
  head: {
    title: 'App',
    meta: [],
    link: [],
    script: []
  },
  env: {
    nodeEnv: process.env.NODE_ENV || 'dev'
  },
  generate: {
  },
  build: {
    'html.minify': {
    },
    extend (config, { isDev, isClient }) {

      config.node = {

          net: 'empty',
          fs: "empty"
      };

    }
  }
}

Thanks for looking.

[conlywork]

Is this problem solved? I also have the same problem.

[pi0]

Please ensure that no errors happen during nuxt build and also NODE_ENV detection is correct.

I've created a repository: https://github.com/pi0/nuxt-programatic-example

It is working fine against nuxt 2.6.x.

[gregtap]

Same issue:

The project is here https://github.com/coulix/nuxt2-ssr-firebase

• nvm v8.16.0
• nuxt 2.6.2
• firefbase 6.7.0

npm install -g firebase-tools

Lastest cloud-functions-emulator:

    "@google-cloud/functions-emulator": "git://github.com/GoogleCloudPlatform/cloud-functions-emulator.git#098e253188d8caa706da08350483468d60f0c049"

Same on beta-5

npm i @google-cloud/[email protected]

Error

```info: User function triggered, starting execution
info: IN New Nuxt Trial:
error:
15:32:29 ERROR Renderer is loaded but not all resources are unavailable! Please check /Users/greg/code/perso/nuxt2-ssr-firebase/prod/server/nuxt/dist/server existence.

at VueRenderer.renderRoute (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:2817:19)
at Server.renderRoute (node_modules/@nuxt/server/dist/server.js:811:38)
at nuxtMiddleware (node_modules/@nuxt/server/dist/server.js:124:26)
at call (node_modules/connect/index.js:239:7)
at next (node_modules/connect/index.js:183:5)
at servePlaceholderMiddleware (node_modules/serve-placeholder/src/index.js:29:16)
at call (node_modules/connect/index.js:239:7)
at next (node_modules/connect/index.js:183:5)
at next (node_modules/connect/index.js:161:14)
at node_modules/@nuxt/server/dist/server.js:555:5

info: Execution took 4 ms, user function completed successfully```

[nikkwong]

Would love to maybe at least get some hints from the dev team as to what may lead to this error so I can try to debug.

[SinPP]

After updating to the 2.6.* version I am having the exact same error message.

[nikkwong]

I think my problem may have been that I was using yarn install to add packages but then was using nuxt build rather than yarn build. It would be nice if there was an intelligible difference between these two commands or some disclaimers that using yarn for dependency management will lead to the nuxt command not working. These commands are commingled in the documents and it lends to a poor developer experience.

[nikkwong]

Also, I get this error if the nuxt.builder runs after yarn build runs. Seems like nuxt.builder corrupts the production files.

[yangfan-coder]

I also encountered such problems. Is there any way to solve them now?

[pi0]

This error mostly happens when using a custom server.js does not match the configuration of nuxt.config.js. buildDir, if specified, should point to correct build dir and mode should not be set to spa from nuxt.config or using --spa.

[PatrickLumenus]

having the same error

[pi0]

@nikkwong @yangfandashuaige @PatrickLumenus @SinPP @conlywork Please provide the following information so we can help to fix your project otherwise we can't!

• Nuxt version
• Deployment target (AWS, Local, VPS, ..)
• Custom server.js file

[pktippa]

I have the same issue

• Nuxt 2.6.2
• Deployment target - GCP
• Not a custom file

[pi0]

@pktippa how do you deploy on google cloud without custom? 🙈 Can you please share nuxt config and package.json?

[pktippa]

@pi0

nuxt.config.js

const pkg = require('./package')


module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    '~/assets/css/tailwind.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    {src: "~/plugins/vue2-google-maps.js"}
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    },
  }
}

package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "XXX",
  "author": "XXX",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "chart.js": "^2.8.0",
    "cross-env": "^5.2.0",
    "express": "^4.16.4",
    "nuxt": "^2.4.0",
    "vue2-google-maps": "^0.10.6"
  },
  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "nodemon": "^1.18.9",
    "tailwindcss": "^0.7.0"
  }
}

custom index.js

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

[pktippa]

@pi0 The issue is not because of nuxt, we are not running the build before deploying to GCP. After we ran "npm run build" and do a deploy it is working perfectly fine. thanks for time.

[joey91133]

v2.8.1 seem fix this issue.

[manniL]

Closing here :relaxed:

[EvilJimJafar]

I'm having this issue on 2.8.1 deploying to AWS ElasticBeanstalk. Did anyone figure out what the problem was?

[arnoldgamboa]

I've had this issue with AWS Elastic Beanstalk. It looks like EB is not running npm build -- there could be a way to do this with the EB settings, but I have not figured it out yet. So what I did is to uncomment .nuxt within .gitigmore, run npm build, commit to git and then run eb deploy. In effect, I'm deploying the app together with the .nuxt directory. It worked.

[rajmohan6268]

Renderer is loaded but not all resources are available! Please check /home/morningstar/.nuxt/dist/server existence.

at VueRenderer.renderRoute (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:4401:19)
at Server.renderRoute (node_modules/@nuxt/server/dist/server.js:758:38)
at nuxtMiddleware (node_modules/@nuxt/server/dist/server.js:140:26)
at call (node_modules/connect/index.js:239:7)
at next (node_modules/connect/index.js:183:5)
at servePlaceholderMiddleware (node_modules/serve-placeholder/src/index.js:29:16)
at call (node_modules/connect/index.js:239:7)
at next (node_modules/connect/index.js:183:5)
at next (node_modules/connect/index.js:161:14)
at next (node_modules/connect/index.js:161:14)

[major697]

Run your application using npm run dev

[shi11]

Experiencing this issue as well on heroku. I've been stuck on it for days.

@pi0 is correct that it may involve custom server - but any additional insights as to why would be super helpful.

@manniL could you please reopen this issue? I don't think v2.8.1 fixed it as I'm running v2.11.0

I can't imagine npm run dev is a wise solution for running on the server.

[pi0]

@shi11 It is definitely not an issue with nuxt but would be happy helping if you can share repo with me 😊

[shi11]

Ok wait, I fixed it but I see what's going on, perhaps you can help @pi0 ?

1. The server build fails when I set rootDir=v2
2. When I set rootDir=''the server build succeeds _however_ then I get the "Renderer is loaded but..." error
3. With the server now built, I change rootDir back to rootDir=v2 and the app works.

Any suggestions? I guess I could change the env var during preInstall and postInstall...

[pi0]

@shi11 With the provided information all can guess is that error is happening because rootDir when the running server is pointing to a wrong directory so the server fails to load resources. If you use a custom destination is a better idea to always provide rootDir

[egorpavlikhin]

This is still an issue. Newly generated project from latest. npm run dev works, but npm start fails (after npm run build)

[Silbad]

Same pb... ok in dev, error 500 in production...

[Cottontop]

I'm experiencing the same issue now.
It started with failing to load resources, both locally and in test-environment, and inspecting the resources in Network tab in devtools, some of the files were up to 1MB. Optimizing the chunks by extending the build solved the problem locally, but now I'm experiencing the same issues as described in this thread: I get a 500 error when loading the page-resource, and have traced the issue back to NuxtServerInit failing.
Please help, I have been scratching my head on this for three days now. Posting my nuxt-config.js and package.json below:
nuxt.config.js

const pkg = require('./package');
const compute = require('./config-util');

const appConfig = compute.getAppConfig();
const basePath = compute.getBasePath(appConfig);

const nodeEnv = process.env.NODE_ENV;
const isDevelopment = nodeEnv === 'development';

console.log('Node environment ' + nodeEnv);
console.log('App type ' + process.env.appType);
console.log('Base path: ', basePath);

module.exports = {
  mode: 'universal',

  /*
   ** Headers of the page
   */
  head: {
    title: pkg.name,
    htmlAttrs: {
      lang: 'no'
    },
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1, maximum-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: pkg.description
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: 'favicon.ico'
      }
    ]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: '~/components/Loading.vue',

  /*
   ** Global CSS
   */
  css: [],

  styleResources: { less: '~assets/vars/variables.less' },

  devtool: 'source-map',

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '~/plugins/ratel-plugin',
    '~/plugins/axios-plugin',
    '~/plugins/notification-plugin',
    {
      src: '~/plugins/touch-plugin',
      ssr: false
    },
    // {
    //   src: '~/plugins/tracking-plugin',
    //   ssr: false
    // },
    '~/plugins/vue-xpf-plugin',
    '~/plugins/modal-plugin',
    {
      src: '~/plugins/vue-rx-plugin',
      ssr: false
    }
  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    '@nuxtjs/svg',
    'nuxt-device-detect'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    browserBaseURL: isDevelopment ? 'http://localhost' : basePath,
    https: !isDevelopment
  },

  env: {
    isDev: isDevelopment,
    appName: appConfig.sys
  },
  /*
   ** render (preload & prefetch)
   */
  render: {
    bundleRenderer: {
      shouldPrefetch: (file, type) => {
        if (type === 'script') {
          const ignoredRoutes = ['user'];
          if (ignoredRoutes.some(r => file.includes(r))) {
            return false;
          }
        }
        return ['script', 'style', 'font'].includes(type);
      }
    }
  },

  router: {
    base: basePath + '/'
    // extendRoutes(routes, resolve) {
    //   routes.push({
    //     name: 'id',
    //     path: '/:id',
    //     component:
    //       process.env.appType === 'v2'
    //         ? resolve(__dirname, 'pages/v2/index.vue')
    //         : resolve(__dirname, 'pages/v1/index.vue')
    //   });
    // }
  },

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.devtool = '#source-map';
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        });
      }

      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map';
      }
      config.output.publicPath = './_nuxt/';
      config.module.rules.push({
        test: /\.hbs$/,
        loader: 'handlebars-template-loader',
        query: {
          runtimePath: 'handlebars/runtime'
        }
      });
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
      svgRule.test = /\.(png|jpe?g|gif|webp)$/;
      if (ctx.isClient) {
        config.optimization.splitChunks.maxSize = 200000;
      }
    },
    postcss: {
      preset: {
        autoprefixer: {
          overrideBrowserslist: [
            'defaults',
            'ie >= 9',
            '> 5%',
            'last 2 versions'
          ],
          grid: true
        }
      }
    },
    transpile: ['@mtw/vue-xpf'],
    cache: true,
    hardSource: true
  }
};

package.json

{
  "name": "*****",
  "engines": {
    "node": ">=8"
  },
  "version": "1.0.0",
  "description": "***",
  "author": "***",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon --inspect --preserve-symlinks server/index.js --watch server --watch nuxt.config.js",
    "dev-backup": "cross-env NODE_ENV=development USE_BACKUP=true nodemon --inspect --preserve-symlinks server/index.js --watch server --watch nuxt.config.js",
    "take-backup": "cross-env NODE_ENV=development TAKE_BACKUP=true nodemon --inspect --preserve-symlinks server/index.js --watch server --watch nuxt.config.js",
    "dev-v2": "cross-env NODE_ENV=development appType=v2 nodemon --inspect --preserve-symlinks server/index.js --watch server --watch nuxt.config.js",
    "dev-v2-backup": "cross-env NODE_ENV=development USE_BACKUP=true appType=v2 nodemon --inspect --preserve-symlinks server/index.js --watch server --watch nuxt.config.js",
    "v2-take-backup": "cross-env NODE_ENV=development TAKE_BACKUP=true appType=v2 nodemon --inspect --preserve-symlinks server/index.js --watch server --watch nuxt.config.js",
    "build": "nuxt build --no-lock",
    "build-v2": "cross-env appType=v2; nuxt build --no-lock",
    "postinstall": "npm run build",
    "start": "cross-env NODE_ENV=test node server/index.js",
    "start-v2": "cross-env NODE_ENV=test appType=v2; node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "dev-debug": "node --inspect node_modules/.bin/nuxt",
    "port-forward": "bash ./elastic-port-forward.sh",
    "port-forward-itest": "bash ./elastic-port-forward.sh itest"
  },
  "dependencies": {
    "@***/apigee-axios": "^1.1.2",
    "@***/config": "^1.0.2",
    "@***/logger": "1.0.11",
    "@***/vue-xpf": "^1.0.52",
    "@***/zipkin-helper": "^2.0.2",
    "@nuxtjs/auth": "^4.5.3",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/style-resources": "^0.1.2",
    "body-parser": "^1.18.3",
    "cookie-parser": "^1.4.4",
    "cors": "^2.8.5",
    "cross-env": "^5.2.0",
    "express": "^4.16.4",
    "fluture": "^11.0.3",
    "fluture-sanctuary-types": "^4.1.1",
    "fuzzyset.js": "0.0.8",
    "handlebars": "^4.1.0",
    "handlebars-template-loader": "^1.0.0",
    "nuxt": "^2.12.2",
    "nuxt-device-detect": "^1.1.5",
    "prometheus-api-metrics": "^2.2.2",
    "ramda": "^0.26.1",
    "rxjs": "^6.5.3",
    "sanctuary": "^2.0.0",
    "sanctuary-def": "^0.20.0",
    "tn-xpf": "^4.1.505",
    "vue-rx": "^6.2.0",
    "vue-slide-up-down": "^1.7.2",
    "vue2-touch-events": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/svg": "^0.1.11",
    "babel-eslint": "^8.2.1",
    "eslint": "^5.0.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": ">=2.14.0",
    "eslint-plugin-jest": ">=21.24.1",
    "eslint-plugin-node": ">=7.0.1",
    "eslint-plugin-prettier": "2.6.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "nodemon": "^1.18.9",
    "prettier": "1.14.3"
  }
}