NextJS + Typescript生成失败，出现@auth0/nextjs-auth 0

6psbrbz9 于 2023-03-29 发布在 TypeScript

关注(0)|答案(6)|浏览(162)

我正在使用NextJS的Typescript，我无法构建应用程序，因为它与auth 0/nextjs-auth 0有一些问题
这就是问题所在。如果我安装了这个，它会一直检查auth 0/nextjs-auth 0包中的问题。
错误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"
  ]
}

next.js

来源：https://stackoverflow.com/questions/67968252/nextjs-typescript-built-failed-with-auth0-nextjs-auth0

6条答案

按热度按时间

bfrts1fy1#

运行以下命令，尝试错误消息所述的操作：

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

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

赞(0）回复(0）举报 2023-03-29

f4t66c6m2#

我建议你看看official example。我在auth0 embed中遇到了类似的问题。不要忘记你需要将你的<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>
  );
}

赞(0）回复(0）举报 2023-03-29

xeufq47z3#

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

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

赞(0）回复(0）举报 2023-03-29

y53ybaqx4#

删除node-modules和package.lock.json，然后删除npm install。如果问题没有解决，请使用此版本：

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

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

赞(0）回复(0）举报 2023-03-29

9fkzdhlc5#

也许这对有同样问题的人会有帮助。在我的情况下，这是一个错误的导入（自动完成），它从src目录中获取了会话。
import { Session } from '@auth0/nextjs-auth0/src/session';

赞(0）回复(0）举报 2023-03-29

eblbsuwk6#

尝试下一个auth，它更流畅。在Server.js中定义提供程序

import NextAuth from 'next-auth'
import AppleProvider from 'next-auth/providers/apple'
import FacebookProvider from 'next-auth/providers/facebook'
import GoogleProvider from 'next-auth/providers/google'
import EmailProvider from 'next-auth/providers/email'

export default NextAuth({
  providers: [
    // OAuth authentication providers...
    AppleProvider({
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
    // Passwordless / email sign in
    EmailProvider({
      server: process.env.MAIL_SERVER,
      from: 'NextAuth.js <no-reply@example.com>'
    }),
  ]
})

App.js

import { SessionProvider } from "next-auth/react"

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

Index.js

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if(session) {
    return <>
      Signed in as {session.user.email} <br/>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  }
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>
  </>
}

创建一个. env.local并添加您的提供程序客户端ID和机密。

赞(0）回复(0）举报 2023-03-29

我来回答

NextJS + Typescript生成失败，出现@auth0/nextjs-auth 0

6条答案

相关问题

热门标签

最新问答