Error: Cannot find module 'fs' => Runtime.ImportModuleError

[trenchesdeveloper]

I'm getting this error from version 2.

[catdad]

More information is needed for this issue.

[BenMoreton]

Got same issue. (stack: nodeJS, serverless framework)

[catdad]

@BenMoreton do you happen to have a minimal repro project that shows this issue?

[Oksitaine]

@BenMoreton do you happen to have a minimal repro project that shows this issue?

I got the same error message. I'm using NextJS 14.1 and i use heic-convert in a route.ts file. This is my following code for this api file ( this turn in Nodejs by default ):

import { NextResponse } from "next/server";
import heicConvert from "heic-convert";

export async function POST(request : Request){
    const reader = await request.arrayBuffer()

    console.log(reader)
    console.log(Buffer.from(reader))

    const heic = await heicConvert({
        buffer : Buffer.from(reader),
        format : "PNG",
        quality : 1
    })

    const response = new NextResponse(heic, {
        headers : {
            "Content-Type" : "image/png"
        }
    })

    return response
}   

I want to build my projet for make a try in production, so i use npm run build and npm run start and i got this following error message :

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
   Collecting page data  .Error: Cannot find module 'fs'
    at I (/Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:1:77)
    at /Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:1:24025
    at c (/Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:24:1098358)
    at 2388 (/Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:24:1098483)
    at t (/Users/wglint/Desktop/ServerAI/serverai/.next/server/webpack-runtime.js:1:127)
    at 9704 (/Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:1:2750)
    at t (/Users/wglint/Desktop/ServerAI/serverai/.next/server/webpack-runtime.js:1:127)
    at 8816 (/Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:1:2008)
    at t (/Users/wglint/Desktop/ServerAI/serverai/.next/server/webpack-runtime.js:1:127)
    at 4157 (/Users/wglint/Desktop/ServerAI/serverai/.next/server/app/api/check/route.js:1:858) {
  code: 'MODULE_NOT_FOUND'
}

> Build error occurred
Error: Failed to collect page data for /api/check
    at /Users/wglint/Desktop/ServerAI/serverai/node_modules/next/dist/build/utils.js:1258:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  .% 

I install the latest version of heic-convert ( "heic-convert": "^2.1.0" ), i don't get how to solve this error x).

EDIT : With the version 1.2.4, i don't have problem

[catdad]

@WGlint In your case, this is definitely a NextJS (or build) issue. You can find plenty of information about that already. Even just adding an explicit "use server" might fix it, but I don't have a convenient NextJS project to test this on right now.

While I suspect the serverless issue to be similar, I can't really tell without seeing the problem. Searching for "serverless" is much more annoying than searching for "nextjs", since serverless is both a module and a concept and you get a lot of results about the concept.

In general, server-side modules should be able to access fs just fine. Some more recent frameworks (like NextJS for example) try to instrument that away from you (in the case of NextJS, it is well-meaning, in that they want all your code to transparently be able to be compiled for either the browser or the server without you understanding where it is going).

Anyway, recent versions of libheif-js now use web assembly for a significant performance improvement. The actual runtime code shouldn't use fs, but I am sure that the emscripten boilerplate ends up requiring it for some reason anyway.

Best advice for now is:

• if you want to run it in the browser, use require('heic-convert/browser') as mentioned in the docs
• if you want to use it on the server, make sure whatever framework you are using it in knows you are using it on the server and that you have access to expected standard server capabilities (like fs) when doing so