TypeError: Cannot read property '_img' of undefined

[lucadalli]

I am attempting to resize images during nuxt.generate by calling context.$img from a server plugin.
The plugin is intentionally naïve and runs on every request to keep the demo minimal.

I am facing the error below:

TypeError: Cannot read property '_img' of undefined
    at handleStaticImage (node_modules/@nuxt/image/dist/runtime/image.js:38:0)
    at getImage (node_modules/@nuxt/image/dist/runtime/image.js:14:0)
    at $img2 (node_modules/@nuxt/image/dist/runtime/image.js:19:0)
    at image_server (plugins/image.server.js:3:0)
    at createApp (node_modules/.cache/nuxt/index.js:185:0)
    at async module.exports.__webpack_exports__.default (node_modules/.cache/nuxt/server.js:85:0)

Reproduction steps:

1. Visit https://codesandbox.io/s/icy-lake-w3wzh?file=/plugins/image.server.js
2. Run yarn run generate in terminal

[shadow81627]

I had a similar issue with my 404 page.

Duplicate of #249

[pi0]

Hi @lucadalli. In fact that stage (plugin entry) server context is not available that's why you are getting this error. Proper method is using beforeNuxtRender hook:

export default function ({ $img, beforeNuxtRender }) {
  if (process.static) {
    beforeNuxtRender(() => {
      $img("https://via.placeholder.com/350x150", {
        width: 100
      });
    });
  }
}

See my fork: https://codesandbox.io/s/lively-feather-uwhmz?file=/plugins/image.server.js (link outdated)

Regardless I will try to add a guard when ssrContext is not available (it won't work but also don't crash and possibly fixing #249)

[pi0]

Guard also added in @nuxt/[email protected].

[lucadalli]

@pi0, it's working as intended with beforeNuxtRender. Thank you 🙏