Module not found: Can't resolve 'fs'

[neiljmac]

• Operating System: Mac OS SOnoma 14.2.1
• Node.js version: Node 18.18.0
• Next.js version Next.js 14.1.0
• fs-extra version: ^11.2.0

On running npm run dev when I open the applciaiton in my browser, the message below is emitted:

 ○ Compiling / ...
 ⨯ ./node_modules/graceful-fs/graceful-fs.js:1:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/fs-extra/lib/fs/index.js
./node_modules/fs-extra/lib/index.js
./pages/utils/FileUploadUtil.tsx
./pages/components/organisms/UploadFile.tsx
./pages/index.tsx
 ⨯ ./node_modules/graceful-fs/graceful-fs.js:1:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/fs-extra/lib/fs/index.js
./node_modules/fs-extra/lib/index.js
./pages/utils/FileUploadUtil.tsx
./pages/components/organisms/UploadFile.tsx
./pages/index.tsx

I am using Typescript and am importing using this: import * as fse from 'fs-extra';

I implement using this, for example: await fse.writeFile(filePath, JSON.stringify(response.data, null, 2));

Why can it not resolve 'fs' as it is clearly in the module dir structure?

[RyanZim]

Looks like you're using next.js to compile for the browser; and so it's failing to resolve the node core module fs, since that isn't available in a browser environment.

[nmcltpx]

Thanks @RyanZim. I need to go away and learn more then. I'm rather new to next.js This can be closed.