next-auth: Module not found: Can't resolve 'crypto'

Environment

System: OS: macOS 13.2.1 CPU: (10) arm64 Apple M1 Pro Memory: 1.66 GB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm Browsers: Chrome: 113.0.5672.92 Safari: 16.3

Reproduction URL

na

Describe the issue

Using the latest next-auth and next I can’t create a production build. I get the following error message:

Module not found: Can't resolve 'crypto'

here: ./node_modules/next-auth/core/init.js:10:14 ./node_modules/next-auth/core/lib/csrf-token.js:8:14 ./node_modules/next-auth/core/lib/email/signin.js:8:14 ./node_modules/next-auth/core/lib/utils.js:10:14 ./node_modules/oauth/lib/oauth.js:1:12

package json:

  "dependencies": {
    "@algolia/autocomplete-js": "^1.8.3",
    "@algolia/autocomplete-theme-classic": "^1.8.3",
    "@coinbase/wallet-sdk": "3.6.3",
    "@everipedia/wagmi-magic-connector": "0.9.1",
    "@floating-ui/react": "0.22.3",
    "@fortawesome/fontawesome-svg-core": "6.4.0",
    "@fortawesome/free-brands-svg-icons": "6.4.0",
    "@fortawesome/pro-light-svg-icons": "6.4.0",
    "@fortawesome/pro-regular-svg-icons": "6.4.0",
    "@fortawesome/pro-solid-svg-icons": "6.4.0",
    "@fortawesome/pro-thin-svg-icons": "6.4.0",
    "@fortawesome/react-fontawesome": "0.2.0",
    "@headlessui/react": "1.7.13",
    "@magic-ext/connect": "6.2.0",
    "@magic-ext/oauth": "^7.1.0",
    "@magic-sdk/provider": "^13.1.0",
    "@mux/mux-video-react": "0.7.8",
    "@ramp-network/ramp-instant-sdk": "4.0.1",
    "@reservoir0x/reservoir-sdk": "0.7.3",
    "@sentry/nextjs": "7.46.0",
    "@types/node": "18.15.11",
    "@types/react": "18.0.33",
    "@types/react-dom": "18.0.11",
    "@vercel/edge-config": "0.1.5",
    "@walletconnect/sign-client": "2.3.2",
    "@walletconnect/web3-provider": "1.8.0",
    "algoliasearch": "^4.17.0",
    "blockies-react-svg": "0.0.13",
    "client-only": "^0.0.1",
    "daisyui": "2.50.0",
    "encoding": "0.1.13",
    "eth-url-parser": "1.0.2",
    "ethers": "5.7.2",
    "graphql-request": "5.1.0",
    "instantsearch.css": "^8.0.0",
    "iron-session": "6.3.1",
    "luxon": "3.3.0",
    "magic-sdk": "13.1.0",
    "next": "13.4.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.43.9",
    "react-hot-toast": "2.4.0",
    "react-hotkeys-hook": "4.3.8",
    "react-instantsearch-hooks-web": "6.43.0",
    "react-markdown": "8.0.7",
    "react-overlays": "5.2.1",
    "react-page-visibility": "7.0.0",
    "react-qr-code": "2.0.11",
    "rooks": "7.8.4",
    "server-only": "^0.0.1",
    "sharp": "0.32.1",
    "siwe": "2.0.5",
    "swr": "2.0.3",
    "tiny-invariant": "1.3.1",
    "typescript": "4.9.5",
    "typesense": "1.5.3",
    "typesense-instantsearch-adapter": "2.6.0",
    "usehooks-ts": "2.9.1",
    "wagmi": "0.10.15",
    "web3-token": "1.0.4",
    "web3modal": "1.9.12",
    "immer": "10.0.1",
    "next-auth": "4.22.1"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "3.3.1",
    "@graphql-codegen/introspection": "3.0.1",
    "@graphql-codegen/typescript": "3.0.4",
    "@graphql-codegen/typescript-graphql-request": "4.5.9",
    "@graphql-codegen/typescript-operations": "3.0.4",
    "@graphql-codegen/typescript-react-apollo": "3.3.7",
    "@headlessui/tailwindcss": "0.1.2",
    "@tailwindcss/aspect-ratio": "0.4.2",
    "@tailwindcss/container-queries": "0.1.1",
    "@types/eth-url-parser": "^1.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "lokijs": "1.5.12",
    "pino-pretty": "9.1.1",
    "postcss": "^8.4.21",
    "tailwindcss": "3.3.2"
  }

next.config.js:

**/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverActions: true,
  },
  productionBrowserSourceMaps: false,
  basePath: '', 
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'tokens.rojiapi.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfig

How to reproduce

See above

Expected behavior

It should compile.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 19 (1 by maintainers)

Most upvoted comments

Found the reason. I was using edge runtime on some routes

export const runtime = ‘edge’;

I found this on “next-auth”: “^4.24.5”,

10:56:20.860 ▲ ./node_modules/next-auth/core/init.js:10:14
10:56:20.860 ▲ Module not found: Can’t resolve ‘crypto’

var _crypto = require(“crypto”);

Can you remove or use crypto-js which supports edge runtime? Or use built-in crypto lib.

Noting that NextAuth supports the Edge Runtime in the experimental v5 and this is fixed for me; works great so far. Thanks Balázs and team 😃

Is there anyway to get this to work with edge runtime? getServerSession on an edge function is giving the above crypto error. I have the latest of all release of next-auth next etc.