NextJS + Typescript 构建失败，@auth0/nextjs-auth0答案

【问题标题】：NextJS + Typescript built failed with @auth0/nextjs-auth0NextJS + Typescript 构建失败，@auth0/nextjs-auth0
【发布时间】：2022-05-03 19:13:16
【问题描述】：

我正在为 NextJS 使用 Typescript，但我无法构建应用程序，因为它与 auth0/nextjs-auth0 存在一些问题

这就是问题所在。如果我安装它，它将继续检查 auth0/nextjs-auth0 包中的问题。

这里是错误https://imgur.com/a/y7ft7Dq

这是我的 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"
  ]
}

【问题讨论】：

尝试安装，停止项目，重新运行项目。无论如何，它告诉您 lib 有问题
嗨，托尼，请将图片直接粘贴到您的 SO 帖子中，而不是链接到它们。

标签： typescript next.js

【解决方案1】：

通过运行尝试错误消息的内容：

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

如果这不起作用，请尝试删除 node_modules，然后运行 npm install 或 yarn

【讨论】：

【解决方案2】：

我建议你看看official example。我在 auth0 嵌入时遇到了类似的问题。不要忘记您需要将<Component> 嵌入app.js 以使auth0 在页面上工作+ 使用withAuthRequired

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

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

【讨论】：

【解决方案3】：

检查您的“tsconfig.json”文件中的编译选项“排除”。如果它不存在，只需添加它并排除“node_modules”。

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

【讨论】：

【解决方案4】：

删除节点模块和package.lock.json，然后npm install。如果问题未解决，请使用此版本：

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

我在我的投资组合网页中使用这个包，我没有遇到任何问题。可能是新版本的bug

【讨论】：

【解决方案5】：

也许它会对遇到同样问题的人有所帮助。就我而言，这是一个错误的导入（自动完成），它从 src 目录中获取了 Session。

从'@auth0/nextjs-auth0/src/session'导入{会话}；

【讨论】：