When trying to import 'fs' I get the error: "Module not found: Can't resolve 'fs'"

[ArturKazuo]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1635-Microsoft Fri Jan 01 08:00:00 PST 2016
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/ArturKazuo/painel-test

To Reproduce

By running "npm run dev" or "npm run build" you will get the following error message: "Module not found: Can't resolve 'fs'"

Describe the Bug

I am building a front end page with nextjs. To enable some features, such as clicking on buttons, I need to enable "use client" on the page. However, in doing this, I am no longer able to import 'fs'. Does anyone have any ideia how to fix this?

Expected Behavior

By running "npm run dev" or "npm run build" you will get the following error message: "Module not found: Can't resolve 'fs'"

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[icyJoseph]

Hi,

When you use the fs module, you are banking on that API being present on the environment where your code runs.

When you use the use client directive, you are telling the framework to bundle the code for the component to be used in the browser.

There's a problem when combining those, because fs doesn't exist in the browser.

You have to refactor your code. So that the module that uses fs is not mixed with the module that is use client.

It was often the case that developers kept everything into one file, creating 1000+ lines files that mixed imports and relied on bundlers to be smart enough to figure out what to discard.

With RSC that's a bit more nuanced. Because 'use client' modules are shipped to the browser, to be used to do hydration and rendering of client components. This has the added benefit that everything that is not under a use client module, directly or indirectly, is NOT shipped to the browser.

What you need to do is "move to the leaves", that is refactor so that the component uses interactivity is a child of the page.

• https://nextjs.org/docs/getting-started/react-essentials#moving-client-components-to-the-leaves

[icyJoseph]

Taking https://github.com/ArturKazuo/painel-test/blob/main/app/page.js as an example:

• next/head is no longer available in App Router, you need to have a server component page (or layout) to use metadata object
• The Home component could be moved into another files, for example Home.js, make it use client and only import what's necessary for Home
• Import that into page.js, and remove "use client" and unused imports from page.js. This turns it into a server component.
• Now you can use the metadata object from the first point

[ArturKazuo]

Hi,

When you use the fs module, you are banking on that API being present on the environment where your code runs.

When you use the use client directive, you are telling the framework to bundle the code for the component to be used in the browser.

There's a problem when combining those, because fs doesn't exist in the browser.

You have to refactor your code. So that the module that uses fs is not mixed with the module that is use client.

It was often the case that developers kept everything into one file, creating 1000+ lines files that mixed imports and relied on bundlers to be smart enough to figure out what to discard.

With RSC that's a bit more nuanced. Because 'use client' modules are shipped to the browser, to be used to do hydration and rendering of client components. This has the added benefit that everything that is not under a use client module, directly or indirectly, is NOT shipped to the browser.

What you need to do is "move to the leaves", that is refactor so that the component uses interactivity is a child of the page.

• https://nextjs.org/docs/getting-started/react-essentials#moving-client-components-to-the-leaves

I get it now, thank you!

I have another problem now, though. In my situation, I would need to use a package that uses 'fs' as a dependency, hence why I tested if 'fs' could be imported directly.
However, That package (@wppconnect-team/wppconnect) will only be used when I click a button. So I don't know what to do. To be able to listen to onClick events I would need a client component.

Is there any way to listen to the onClick event in the client component and somehow alert the server side component that the button has been clicked, so that I can use the package (@wppconnect-team/wppconnect) ?

[icyJoseph]

Aha I was afraid something like this was going to be needed.

Well, then you have to think that your button click will happen in the browser, and that you probably want to read some server side data instead, which is why you are using Node.js' built-in fs module.

You see there's two systems at play here. One way would be to make a fetch request when the user clicks the button, which arrives at an API Router handler in your server, which uses the package you want, and then gives back a response with the necessary data to provide the feature you are implementing. https://nextjs.org/docs/app/building-your-application/routing/route-handlers

You can also look into server actions to trigger server side work from client components. https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#with-client-components

[ArturKazuo]

Thank you!!

[aleksa-codes]

This is the discussion I was looking for. I am facing the same issue and reached the same conclusion mentioned here, to use Route Handlers to use fs on the server side.

However, this doesn't fix the problem in my case. I still get the error: 'Can't resolve fs'. I'm not sure, but maybe it's because I'm trying to fetch data from a client component?

I'm attempting to integrate OpenAI's API for text-to-speech into a Next.js app, but I can't get fs to work: https://platform.openai.com/docs/guides/text-to-speech?lang=node

[Shanmukhsvstp]

This worked for me:
Change version of fs package to 0.0.2 from 0.0.1-security. It worked for me.

Subscribe here if it worked for you too, it helps me.
Click Here To Subscribe

[AssiaChemlali]

OK, this is my code from the package.json: "dependencies": {
"bootstrap": "^5.3.3",
"clsx": "^2.1.0",
"framer-motion": "^11.0.24",
"fs": "^0.0.2",
"fslightbox-react": "^1.7.6",
"gray-matter": "^4.0.3",
"next": "14.1.4",
"next-mdx-remote": "^4.4.1",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.0.1",
"react-intersection-observer": "^9.8.1",
"swiper": "^11.0.7",
"typewriter-effect": "^2.21.0"
},

[Shanmukhsvstp]

Change it to:

"dependencies": { "bootstrap": "^5.3.3", "clsx": "^2.1.0", "framer-motion": "^11.0.24", "fs": "^0.0.1-security", "fslightbox-react": "^1.7.6", "gray-matter": "^4.0.3", "next": "14.1.4", "next-mdx-remote": "^4.4.1", "next-themes": "^0.3.0", "react": "^18", "react-dom": "^18", "react-icons": "^5.0.1", "react-intersection-observer": "^9.8.1", "swiper": "^11.0.7", "typewriter-effect": "^2.21.0" },

If I helped you, Support me by Subscribing, Click Here

[AssiaChemlali]

but you did change fs package to 0.0.2?

[Shanmukhsvstp]

Yes, fs:'0.0.2' has some conflicts, if you want to use that version only, you need to add "use client" in top of your jsx. But it may give errors like it did for me. Hence I changed it to 0.0.1-security.

[AssiaChemlali]

ok , thanks for helping

[Alexandre-Pascal]

It's common to encounter the error "Module not found: Can't resolve 'fs'" when attempting to import the 'fs' module in a client-side context, such as within a component using 'use client'. Since the 'fs' module is a Node.js core module providing file system-related functionality, it's only available on the server-side.

For those who may encounter this issue in the future, it's important to remember that 'fs' can only be used on the server-side. If you need to perform file system operations within a client-side context, consider alternative approaches using browser APIs like the File API or delegate these operations to the server-side using API routes or server-side scripts.

[mrbeandev]

thank you it worked for me when I change fs version to "fs": "^0.0.2" ✅ from "fs": "^0.0.1-security" ❌.

[Shanmukhsvstp]

👍

…

On Mon, 23 Sept, 2024, 12:34 pm MrBeanDev, ***@***.***> wrote: thank you it worked for me when I change fs version to "fs": "^0.0.2" ✅ from "fs": "^0.0.1-security" ❌. — Reply to this email directly, view it on GitHub <#54176 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVLFJM5S6MGA4JHO6YCGNGTZX64RFAVCNFSM6AAAAAA3UIPBF6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANZSGI2TENY> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[mehmetakar17]

There are more than one solution because there are also more than one problem which can cause this message. So, I researched and found 6 solutions about that and shared on my dev.to post Module not found: Can't resolve 'fs' because it is too long.

I share one of them below:

1. Ensure fs is Used Only in Server-Side Code

Next.js provides specific methods for server-side operations, such as:

• getServerSideProps
• getStaticProps
• getStaticPaths
• API routes

Code utilizing the fs module should be placed exclusively within these server-side methods. For example:

import fs from 'fs';
import path from 'path';

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'data', 'example.json');
  const fileContents = fs.readFileSync(filePath, 'utf8');

  return {
    props: {
      data: JSON.parse(fileContents),
    },
  };
}