NuxtJS3 + Nuxt auth-next - 无法读取未定义的属性（读取“选项”）

Question

我将 NuxtJS3 与 @nuxtjs/auth-next 一起使用，当我这样做时

npm install

我收到此错误

错误无法读取未定义的属性（读取“选项”）00:10:01 在 axiosModule (node_modules/@nuxtjs/axios/lib/module.js:12:13) 在 installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9) 在异步 initNuxt (node_modules/nuxt/dist/index.mjs:1825:7) 在异步 loadNuxt (node_modules/nuxt/dist/index.mjs:1857:5) 在异步 loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:493:19) 在异步 Object.invoke (node_modules/nuxi/dist/chunks/prepare.mjs:30:18) 在 async _main (node_modules/nuxi/dist/cli.mjs:50:20)

出现此错误后，我无法启动应用程序。我试图环顾四周，但没有运气。我尝试查看一些已知的错误，但没有成功。

这是我的

package.json

文件：

{
    "private": true,
    "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "lint": "eslint --ext .ts,.js,.vue, --ignore-path .gitignore . && prettier . --write",
        "format": "prettier . --write",
        "postinstall": "nuxt prepare",
        "prepare": "husky install"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint"
        }
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^6.2.0",
        "@typescript-eslint/eslint-plugin": "^5.35.1",
        "@typescript-eslint/parser": "^5.35.1",
        "@vue/eslint-config-typescript": "^11.0.0",
        "eslint": "^8.22.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-vue": "^9.4.0",
        "husky": "^8.0.0",
        "nuxt": "3.0.0",
        "prettier": "^2.7.1",
        "typescript": "^4.7.4",
        "vite": "^3.0.9",
        "vite-plugin-eslint": "^1.8.1",
        "vite-plugin-vuetify": "^1.0.0",
        "vue-eslint-parser": "^9.0.3",
        "vuetify": "^3.0.1"
    },
    "dependencies": {
        "@mdi/font": "^7.0.96",
        "@nuxtjs/auth-next": "^5.0.0-1622020005.1b3f5f5",
        "@nuxtjs/axios": "^5.13.6",
        "@pinia/nuxt": "^0.4.6"
    }
}

这是我的

nuxt.config.ts

文件：

import vuetify from "vite-plugin-vuetify";
import eslintPlugin from "vite-plugin-eslint";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export default defineNuxtConfig({
  css: ["vuetify/styles"], // vuetify ships precompiled css, no need to import sass
  vite: {
    ssr: {
      noExternal: ["vuetify"] // add the vuetify vite plugin
    },
    plugins: [eslintPlugin()]
  },
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/auth-next",
    "@pinia/nuxt",
    // this adds the vuetify vite plugin
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore TODO try to delete this ts-ignore after vuetify will be stable
        config.plugins.push(vuetify())
      );
    }
  ],
  /*
   ** Auth module configuration
   ** See https://auth.nuxtjs.org/api/options.html
   */
  auth: {
    strategies: {
      google: {
        client_id: "my id"
      }
    },
    redirect: {
      login: "/login",
      logout: "/",
      callback: "/login",
      home: "/"
    }
  },
  axios: {},
  alias: {
    pinia: "/node_modules/@pinia/nuxt/dist/pinia.mjs"
  }
});

我真的不知道为什么会出现这个错误。我尝试用纱线构建它，但没有成功。我也尝试过

@nuxtjs/auth

也没有运气。有没有办法将 NuxtJS auth 与 NuxtJS3 一起使用？

Answer 1

截至今天，这是唯一可以与 Nuxt3 一起使用的身份验证模块，如此处确认。该团队正在开发正式版本，它已在路线图上，但尚未完成。

您可能可以关注Github问题来获取一些更新和更多信息。

---

您还可以尝试在谷歌上搜索有关该主题的博文，并通过可组合项和对中间件的一些检查来实现它。