error - TypeError [ERR_INVALID_URL]: Invalid URL

[jorepstein]

Question 💬

I am getting a traceback in next-auth.js when trying to use the < SessionProvider/ >

$ yarn run dev
yarn run v1.22.17
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\src\releasify_web\.env.local
event - compiled successfully in 3s (202 modules)
wait  - compiling /_error...
event - compiled successfully in 200 ms (203 modules)
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:371:5)
    at onParseError (node:internal/url:552:9)
    at new URL (node:internal/url:628:5)
    at parseUrl (C:\src\releasify_web\node_modules\next-auth\lib\parse-url.js:17:16)
    at Object.<anonymous> (C:\src\releasify_web\node_modules\next-auth\react\index.js:70:34)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  input: '',
  code: 'ERR_INVALID_URL'
}
wait  - compiling /...
event - compiled successfully in 161 ms (206 modules)
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:371:5)
    at onParseError (node:internal/url:552:9)
    at new URL (node:internal/url:628:5)
    at parseUrl (C:\src\releasify_web\node_modules\next-auth\lib\parse-url.js:17:16)
    at Object.<anonymous> (C:\src\releasify_web\node_modules\next-auth\react\index.js:70:34)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  input: '',
  code: 'ERR_INVALID_URL'
}
error - TypeError [ERR_INVALID_URL]: Invalid URL
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:371:5)
    at onParseError (node:internal/url:552:9)
    at new URL (node:internal/url:628:5)
    at parseUrl (C:\src\releasify_web\node_modules\next-auth\lib\parse-url.js:17:16)
    at Object.<anonymous> (C:\src\releasify_web\node_modules\next-auth\react\index.js:70:34)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  input: '',
  code: 'ERR_INVALID_URL'
}

I apologize in advanced, I am fairly new to node, next.js, and next-auth.

This has been driving me crazy because I was getting this traceback and then I threw everything I could at it (uninstalling node_modules, reinstalling, messing with package.lock, etc.) and it went away. Everything was great. Then I tried adding "@mui/material": "^5.2.1", to my package.json and it came back. I've tried everything I could again but I imagine there is some dependency issue with next-auth.

How to reproduce ☕️

my _app.js

import '../styles/globals.css';

export default function App({Component, pageProps: {session, ...pageProps}}) {
  return (
    <SessionProvider>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

my index.js
export default function Component() { return <div/> }

My environment:

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 7.11 GB / 15.95 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\src\releasify_web\node_modules\.bin\yarn.CMD
    npm: 8.1.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.34)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    next: 12.0.1 => 12.0.1
    next-auth: 4.0.0-beta.7 => 4.0.0-beta.7
    react: 17.0.2 => 17.0.2

Also:
When I push the app to my git repo and it is deployed on Vercel, THERE ARE NO ISSUES!

[balazsorban44]

#3077

[jorepstein]

In case anyone else is reading this:
Based on the linked post (which I don't totally understand) I added 'NEXTAUTH_URL="http://localhost:3000"` to my .env.local and it works now 🤷‍♀️