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

时间:2021-02-16 22:23:51

标签: reactjs typescript next.js auth0

我正在尝试将 auth0-js 与内置 react+typescript+nextjs 的客户端项目一起使用,无论我做什么,我都会遇到此错误:

M'

我正在尝试像这样初始化 auth0-js

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

而且我也已经安装了 @types/auth0-js 因为 typescript.据我所知,这似乎是 Typescript 的一些奇怪配置。我已经多次验证该软件包在我的 node-modules 文件夹中,并且我也多次卸载/重新安装。

我不确定接下来要做什么,所以如果有人有任何问题或建议,我将不胜感激!

这也是我的 package.json 文件

import { WebAuth } from 'auth0-js';

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

这是我的 tsconfig.json

{
  "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"
  }
}

提前致谢!

1 个答案:

答案 0 :(得分:0)

我相信您使用了错误的软件包。

Auth0.js 是一个“用于 Auth0 API 的客户端 JavaScript 工具包。” 和“安装 auth0-js 模块后,您需要将其与其所有依赖项捆绑在一起.” TLDR:它旨在用于浏览器

您要找的是auth0/nextjs-auth0,找到它here