bug: mkdir /var/task/.vercel_build_output

[oritwoen]

After a lot of effort, I managed to create a "working" build @nuxt/image in conjunction with @nuxt/vercel-builder in relation to issue: https://github.com/nuxt/image/issues/344.

Only now there is a completely different problem. Upon entering any subpage, Vercel Logs report:

[GET] /
18:06:12:91
FATAL  ENOENT: no such file or directory, mkdir '/var/task/.vercel_build_output'2021-09-13T16:06:14.275Z	undefined	ERROR	λ Error while initializing nuxt: [Error: ENOENT: no such file or directory, mkdir '/var/task/.vercel_build_output'] {  errno: -2,  code: 'ENOENT',  syscall: 'mkdir',  path: '/var/task/.vercel_build_output'}RequestId: 2b315c53-269f-49dd-bc50-fb26bec43f43 Error: Runtime exited with error: exit status 1Runtime.ExitError

[pi0]

/cc @danielroe

[jonathanmelville]

This is still an issue, any movement on resolving this?

[jonathanmelville]

For anybody else who comes across this issue, the only working solution for using @nuxt/image with vercel-builder seems to be using the the IPX provider.

[lexvzalingen]

@jonathanmelville, would you be able to share more details around your setup? I'm stuck going around in circles with IPX configuration.

[jonathanmelville]

@lexvzalingen Yeah it's kind of a headache to get it working.

1. You need to install ipx as a dependency in your project: npm i ipx
2. Now create this file in your project server/middleware/ipx.js. The contents of that file should look something like this (you will need to update the values of the domains and aliases to your own if you have any):

import { createIPX, createIPXMiddleware } from 'ipx'

// https://github.com/unjs/ipx
const ipx = createIPX({
  dir: '', // absolute path to images dir
  domains: ['https://scontent.cdninstagram.com'], // allowed external domains (should match domains option in nuxt.config)
  alias: {
    instagram: 'https://scontent.cdninstagram.com',
  },
  sharp: {}, // sharp options
})

export default createIPXMiddleware(ipx)

3. Now your nuxt.config.js config should look something like you see below. Again update domains/alias to match your own. In my case I'm just using it to resize images from Instagram's Basic Display API.

// nuxt.config.js

export default {
       image: {
    provider: 'ipx',
    domains: ['https://scontent.cdninstagram.com'],
    presets: {
      instagram: {
        modifiers: {
          format: 'jpg',
          width: 400,
          height: 400,
        },
      },
    },
    alias: {
      instagram: 'https://scontent.cdninstagram.com',
    },
  },
}

4. And finally, load your middleware:

// nuxt.config.js 

export default {
      serverMiddleware: [{ path: '/_ipx', handler: '~/server/middleware/ipx' }]
}

That should build and run @nuxt/image on Vercel SSR with @vercel/builder using the ipx provider.

[jonathanmelville]

I forgot one final step, you need to expose your server/middleware directory to Vercel during the build.

In your vercel.json file:

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

[jonathanmelville]

@lexvzalingen Did you get it working?

[lexvzalingen]

I got it to work just now, thanks a million @jonathanmelville! I had to apply this patch too: https://github.com/nuxt/image/issues/434

All good now, thanks a lot.

[pablogtrz]

@jonathanmelville I'm in the same situation: SSR deployed in Vercel using vercel-builder and ipx as provider.

My configuration is almost the same you posted above, but in my case I'm not able to set the dir for display local files in Vercel. I've the images stored in static/images/... , and I always receive a 404 from IPX: IPX: File not found: /var/task....

How are you displaying your static images?

[jonathanmelville]

@pablogtrz In my case I'm not using it to transform local images, only to size down remote images returned from Instagram's Basic Display.

[pablogtrz]

@pablogtrz In my case I'm not using it to transform local images, only to size down remote images returned from Instagram's Basic Display.

Thanks for the quick answer! I'll keep trying.

@lexvzalingen did you face this problem?

[wyuten]

I was remove @nuxt/image and it's worked for me!

[SushyDev]

Is there a way to use the vercel edge network provider with nuxt ssr?

[cmegalo]

When deploying your nuxt applications to Vercel platform, image module can use Vercel's Edge Network to optimize images on demand.

This provider will be enabled by default in vercel deployments.

You can set default provider using NUXT_IMAGE_PROVIDER environment variable. Providers below, are automatically detected: Vercel

Setting the NUXT_IMAGE_PROVIDER Environment Variable in Vercel as cloudinary allowed me to get around the reported error.

[danielroe]

This is no longer reproducible for me.