'NextJS + Typescript built failed with @auth0/nextjs-auth0

I'm using Typescript for NextJS and I cannot build the application because it has some issues with the auth0/nextjs-auth0

This is the issue. If I install this, it will keep checking for issues within the auth0/nextjs-auth0 packages.

Here is the error https://imgur.com/a/y7ft7Dq

This is my tsconfig.json

    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": [
      "es6",
      "es7",
      "esnext",
      "dom"
    ],
    "allowJs": true, /* Allow javascript files to be compiled. */// "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "preserve",                  /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "removeComments": false,
    "strict": true, /* Enable all strict type-checking options. */
    "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
    "strictNullChecks": true, /* Enable strict null checks. */
    "strictFunctionTypes": true, /* Enable strict checking of function types. */
    "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
    "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
    "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. *//* Additional Checks */
    "noUnusedLocals": true, /* Report errors on unused locals. */
    "noUnusedParameters": true, /* Report errors on unused parameters. */
    "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. *//* Module Resolution Options */
    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": ".",                    /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                 /* Specify the location where debugger should locate map files instead of generated locations. */
    "inlineSourceMap": true,
    "inlineSources": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "declaration": true,
    "declarationDir": "./node_modules/@auth0/nextjs-auth0/src/auth0-session",
    "declarationMap": true
  },
  "include": [
    "pages"
  ],
  "exclude": [
    "node_modules"
  ]
}

typescript next.js

Solution 1:^[1]

Try what the error message says, by running:

npm i --save-dev @types/url-join

If that does not work, then try deleting node_modules and then run npm install or yarn

Solution 2:^[2]

I recommend you to take a look at the official example. I had similar problems with auth0 embed. Don't forget you need to embed your <Component> in app.js to make auth0 work on pages + using withAuthRequired

import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  const { user } = pageProps;
  return (
      <UserProvider user={user}>
        <Component {...pageProps} />
      </UserProvider>
  );
}

Solution 3:^[3]

Check your "tsconfig.json" file for compilation option "exclude". If it does not exist, just add it and exclude "node_modules".

// tsconfig.json
{
  "compilerOptions": {
  ...
  "exclude": [
    "node_modules", 
  ]
}

Solution 4:^[4]

delete the node-modules and package.lock.json, then npm install. If issue is not resolved use this version:

"@auth0/nextjs-auth0": "^1.2.0",

I am using this package in my portfolio webpage, and i did not get any issue. It might be a bug in the new version

Solution 5:^[5]

Maybe it will be helpful for someone having the same problem. In my case it was a wrong import (autocomplete), which took the Session from src directory.

import { Session } from '@auth0/nextjs-auth0/src/session';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharman
Solution 2	illia chill
Solution 3	Suneel K
Solution 4	Yilmaz
Solution 5	Alexandra Bri

'NextJS + Typescript built failed with @auth0/nextjs-auth0

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]