#Module not found: Can't resolve 'fs/promises'

1 messages · Page 1 of 1 (latest)

torpid hinge
#

I get this message using NextJS 14.2.5, node 20.16.0, npm 10.2.4 and chrome 127.0.6533.89 for the following component:

import fs from 'fs/promises'
export async function logging({func, id, comp}: {func: string, id: string, comp: string}) {
const filePath = 'd:\dropbox\javascript\prog\react\courses\wds\ecommerce\act\json/data.json'
let arrayData = JSON.parse((await fs.readFile(filePath)).toString('utf8'))
const result = await fs.writeFile(filePath, JSON.stringify(new Array([func, id, comp])))
}
return 'Correct'
}

The messages disappeares fater commenting the lines with fs.readFile and fs.writeFile
I have reported this also in the node community, but got the answer that th eproblem will be NextJS related.

I'm stuck so will appreciate any help for this problem.

quick riverBOT
#

Hi @torpid hinge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The issue you're experiencing is related to the fact that Next.js doesn't support the built-in Node.js modules like 'fs' (file system) out of the box. This is because Next.js is a framework for building universal JavaScript applications, and it has to make sure that the code you write can run both on the server and in the browser. The 'fs' module is a server-side module, which means it doesn't exist in the browser environment.

In your case, you're trying to use 'fs' in a way that it gets included in the client-side bundle, which is causing the error.

To fix this issue, you should ensure that the code using 'fs' is only run on the server. You can do this by moving the code into an API route or using dynamic imports with ssr: false.

Here's an example of how you can use dynamic imports to ensure 'fs' is only imported on the server:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <Footer />
    </div>
  )
}

export default Home

In this example, DynamicComponentWithNoSSR will only be imported on the client-side, so you can safely use 'fs' or other Node.js modules in that component.

For more information, you can refer to the Next.js documentation on Dynamic Imports (https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr).

#

Please note that using 'fs' in this way will only work if you're running Next.js in a Node.js environment. If you're deploying to Vercel or another platform that uses serverless functions, you may run into issues because 'fs' won't be able to access the file system in a serverless environment. In that case, you would need to use a different method to read and write files, such as using an external storage service.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@torpid hinge kapa.ai is still learning and improving, please let us know how it did by reacting below