NuxtJS3集成@nuxtjs/auth-next报错：Cannot read properties of undefined (reading 'options')

执行npm install时出现如下报错：

ERROR Cannot read properties of undefined (reading 'options') 00:10:01
at axiosModule (node_modules/@nuxtjs/axios/lib/module.js:12:13)
at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
at async initNuxt (node_modules/nuxt/dist/index.mjs:1825:7)
at async loadNuxt (node_modules/nuxt/dist/index.mjs:1857:5)
at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:493:19)
at async Object.invoke (node_modules/nuxi/dist/chunks/prepare.mjs:30:18)
at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

该报错导致应用无法启动，已尝试以下操作但均无效：

• 在Stack Overflow查找解决方案、排查已知Bug
• 使用yarn替代npm构建
• 替换为@nuxtjs/auth包

以下是我的配置文件：

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"
  }
});

请问是否有办法在NuxtJS3中使用NuxtJS auth？

解决方案说明 #

1. 核心问题：你使用的@nuxtjs/auth-next和@nuxtjs/axios都是为Nuxt2开发的模块，完全不兼容Nuxt3的模块系统，这就是报错的根源——这些模块依赖Nuxt2的内部API，而Nuxt3已经重构了相关逻辑。

2. Nuxt3 官方推荐的Auth方案：

   • 使用@sidebase/nuxt-auth，这是Nuxt官方维护的适配Nuxt3的认证模块，支持OAuth（包括Google）、Credentials等多种认证策略，完全适配Nuxt3架构。
   • 替换步骤：
     • 卸载旧模块：npm uninstall @nuxtjs/auth-next @nuxtjs/axios
     • 安装新模块：npm install @sidebase/nuxt-auth
     • 在nuxt.config.ts中添加模块并配置Google OAuth：

       export default defineNuxtConfig({
         modules: ['@sidebase/nuxt-auth'],
         auth: {
           provider: {
             type: 'authjs',
             authjs: {
               providers: [
                 {
                   id: 'google',
                   name: 'Google',
                   type: 'oauth',
                   wellKnown: 'https://accounts.google.com/.well-known/openid-configuration',
                   authorization: { params: { scope: 'openid email profile' } },
                   idToken: true,
                   checks: ['pkce', 'state'],
                   clientId: '你的Google Client ID',
                   clientSecret: '你的Google Client Secret'
                 }
               ]
             }
           }
         }
       })
       

     • 按照模块文档配置认证页面和业务逻辑即可。

3. 关于数据获取：Nuxt3内置了$fetch和useFetch等数据获取方法，无需额外安装Axios。如果仍需使用Axios，可以直接安装原生Axios，或使用适配Nuxt3的Axios包。

内容的提问来源于stack exchange，提问作者squerty456