生成的NextJS+Typescript失败，使用@auth0/NextJS-auth0

Question

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

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

这是错误https://i.stack.imgur.com/L7sB7.jpg

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

Answer 1

通过运行来尝试错误消息所说的内容

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

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

Answer 2

我建议您看一下官方示例。我在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>
);
}

Answer 3

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

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

Answer 4

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

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

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

Answer 5

也许这对有同样问题的人会有所帮助。在我的案例中，这是一个错误的导入(自动完成(，它从src目录中获取了Session。

从"@auth0/nextjs-auth0/src/Session"导入｛Session｝；

Answer 6

尝试下一个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 <[e-mail]>'
}),
]
})

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和机密。

Answer 7

我遵循了github上的nextjs文档，没想到会出现这个编译错误。我删除了节点模块和package.json并运行了npm安装。消除错误的方法是将原来的import语句从nextjs github切换为以下语句：

import { useUser } from '@auth0/nextjs-auth0/client';

它是在npm文档页面上找到的。https://www.npmjs.com/package/@auth0/nextjs-auth0

祝你好运！