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

Version

v2.6.2

Reproduction link

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.

<div align="right">_{This bug report is available on Nuxt community (#c9064)}</div>

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 30 (8 by maintainers)

Most upvoted comments

@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.

pktippa on May 20, 2019

Run your application using npm run dev

major697 on Jan 28, 2020

@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 on May 19, 2019

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

[Update]: I discovered that my automated build (on Bitbucket) wasn’t generating anything for nuxt build. No idea why. I’m going to build locally and deploy that version manually until I figure out what is wrong. Thanks for the hints here.

[Update 2]: Turns out I had a module under devDependencies instead of dependencies so npm install --production was skipping it. Oops. Bitbucket build pipeline wasn’t reporting the error from nuxt build (helpful!). For anyone else with this issue I suggest running your automated deployment tasks locally to make sure .nuxt/dist is actually being generated.

JimJafar on Jul 5, 2019