fast-glob or fdir isn't working with Next.js. Throws Module not found: Can't resolve 'fs'

[deadcoder0904]

Any time I do the following in pages/index.js, I get the error:

import glob from 'fast-glob'

or

import fdir from 'fdir'

The complete error when I do next dev is:

> next dev

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
error - ./node_modules/fdir/src/compat/fs.js:1:56
Module not found: Can't resolve 'fs'
null
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/fdir/src/compat/fs.js:1:56
Module not found: Can't resolve 'fs'
null

And when I try to do next build, it gives:

> next build

info  - Creating an optimized production build  
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '~/blog-mdx-remote/node_modules/fdir/src/compat'


> Build error occurred
Error: > Build failed because of webpack errors
    at build (~/blog-mdx-remote/node_modules/next/dist/build/index.js:15:918)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

How do I solve this?

[deadcoder0904]

Used this great tool to understand the code that gets bundled in the client-side.

Turned out, I was importing a variable from a file that uses fast-glob which internally uses fs but I wasn't using the variable anywhere inside getStaticProps so the files imports fast-glob weren't getting eliminated.

An example:

mdxUtils.js

import glob from 'fast-glob'
import path from 'path'

export const BLOG_PATH = path.join(process.cwd(), 'posts')
export const blogFilePaths = glob.sync(`${BLOG_PATH}/blog/**/*.mdx`)

index.js

import { BLOG_PATH, blogFilePaths } from './mdxUtils'

export const getStaticProps = () => {
  const posts = blogFilePaths.map((filePath) => {
    ...
  }
  return { props: { posts } }
}

As you can see I am not using BLOG_PATH anywhere in index.js but still importing it. I am only using blogFilePaths so it gave me this error.

This is really tricky error which is hard to spot & I think it should be in the documentation FAQ :)