Module not found: Can't resolve 'fs'

[TheRealBenForce]

I'm following the app router dashboard tutorial and have just attempted to implement auth according to this page. It's probably worth mentioning I'm working in GitHub codespaces. When I click the "Login" link my terminal says:

○ Compiling /login ...
 ⨯ ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

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

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./auth.ts
./app/lib/actions.ts
./app/ui/login-form.tsx
 ⨯ ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

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

Most of what I've found is this is related to running server components on the client side. I don't think that's my case because in the 4 files listed from the trace that are in my source, only login-form.tsx has "use client", and this matches the docs.

Here is my package.json:

{
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "prettier": "prettier --write --ignore-unknown .",
    "prettier:check": "prettier --check --ignore-unknown .",
    "start": "next start",
    "seed": "node -r dotenv/config ./scripts/seed.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-brands-svg-icons": "^6.5.2",
    "@fortawesome/free-regular-svg-icons": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@tailwindcss/forms": "^0.5.7",
    "@tanstack/react-table": "^8.16.0",
    "@types/node": "20.5.7",
    "@vercel/postgres": "^0.5.1",
    "autoprefixer": "10.4.15",
    "bcrypt": "^5.1.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.372.0",
    "next": "^14.0.2",
    "next-auth": "^5.0.0-beta.19",
    "next-themes": "^0.3.0",
    "postcss": "8.4.31",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.51.4",
    "react-icons": "^5.1.0",
    "tailwind-merge": "^2.3.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.2.2",
    "zod": "^3.23.6"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.13",
    "@types/bcrypt": "^5.0.1",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.14",
    "@vercel/style-guide": "^5.0.1",
    "dotenv": "^16.3.1",
    "eslint": "^8.52.0",
    "eslint-config-next": "^14.0.0",
    "eslint-config-prettier": "9.0.0",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.4"
  },
  "engines": {
    "node": ">=18.17.0"
  }
}

Any help would be super appreciated. Thanks!

[icyJoseph]

Did you put a use server directive at top of the file that contains your server actions?

[TheRealBenForce]

Thank you! I think the docs may need to be updated. I don't have the auth fully working now but I'm able to load my login page and the missing fs module error is now gone.

The problem was, I skipped this step where the guide says add 'user server' to @/app/lib/actions.tsx

If you are using the guide as a reference to implement some quick auth like I did, the tutorial sample code does not 'use server' in @/app/lib/actions.tsx. I believe this may be a mistake in the docs.