auth0-js 导入失败 - 使用 typescript + react + nextjs

Question

I'm trying to use auth0-js with a client side project built in react+typescript+nextjs and no matter what I do I keep running into this error:

Module not found: Error: Can't resolve 'auth0-js' in '/usr/src/app/components/Auth'

I'm attempting to initialize auth0-js like this

import { WebAuth } from 'auth0-js';

const auth = new WebAuth({
  domain: process.env.NEXT_AUTH0_DOMAIN,
  clientID: process.env.NEXT_AUTH0_CLIENTID
});

and I've already installed @types/auth0-js as well because typescript. As far as I can tell, this seems to be some odd configuration with Typescript. I've verified multiple times that the package is in my node-modules folder and I've uninstalled/reinstalled multiple times as well.

I'm not really sure what to do next so if anyone has questions or recommendations, I'd greatly appreciate that!

Here's my package.json file as well

{
  "name": "br-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "storybook": "start-storybook -p 6006 --quiet",
    "build-storybook": "build-storybook",
    "storybook:clean": "rm -rf node_modules/.cache/storybook",
    "json-server": "json-server -p 5000 --host 0.0.0.0 --watch db.json"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@types/auth0-js": "^9.14.2",
    "@types/lodash-es": "^4.17.4",
    "@types/react-dom": "^17.0.0",
    "@types/react-modal": "^3.12.0",
    "auth0-js": "^9.14.3",
    "autoprefixer": "^9",
    "classnames": "^2.2.6",
    "date-fns": "^2.16.1",
    "firebase": "^8.2.4",
    "lodash-es": "^4.17.20",
    "next": "10.0.5",
    "next-transpile-modules": "^6.0.0",
    "postcss": "^7",
    "rc-slider": "^9.7.1",
    "react": "17.0.1",
    "react-datepicker": "^3.4.1",
    "react-dom": "17.0.1",
    "react-functional-select": "^2.9.5",
    "react-modal": "^3.12.1",
    "react-query": "^3.5.16",
    "react-window": "^1.8.6",
    "recoil": "^0.1.2",
    "styled-components": "^5.2.1",
    "styled-jsx-plugin-postcss": "^4.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@next/bundle-analyzer": "^10.0.5",
    "@storybook/addon-actions": "^6.1.15",
    "@storybook/addon-essentials": "^6.1.15",
    "@storybook/addon-links": "^6.1.15",
    "@storybook/react": "^6.1.15",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "husky": ">=4",
    "import-sort-style-module": "^6.0.0",
    "jest": "^26.6.3",
    "json-server": "^0.16.3",
    "lint-staged": ">=10",
    "prettier": "^2.2.1",
    "prettier-plugin-import-sort": "^0.0.6",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.3"
  },
  "importSort": {
    ".js, .jsx, .ts, .tsx": {
      "style": "module",
      "parser": "typescript"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "tsc --noEmit"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,scss,md,json}": "prettier --write"
  }
}

and here's my tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "paths": {
      "@api/*": ["api/*"],
      "@atoms/*": ["atoms/*"],
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@root/*": ["./*"],
      // TODO: Rename this because it could conflict with
      // definitely-typed definitions :facepalm:
      "@typedefs/*": ["typedefs/*"],
      "@utils/*": ["utils/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": false,
    "target": "es5"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Thanks in advance!

Answer 1

I believe you are using the wrong package.

Auth0.js is a "Client Side JavaScript toolkit for Auth0 API." and "After installing the auth0-js module, you'll need bundle it up along with all of its dependencies." TLDR: It is meant to be used in the browser .

What you are looking for is auth0/nextjs-auth0 , find it here .