NuxtJS3 + Nuxt auth-next - Cannot read properties of undefined (reading 'options')

Question

I am using NuxtJS3 with @nuxtjs/auth-next and when I do npm install I get this error

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)

With this error I cannot start the application. I tried to look around on SO but with no luck. I tried to look at some known bugs also with no success.

This is my package.json file:

{
    "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"
    }
}

This is my nuxt.config.ts file:

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

I really do not know why I am getting this error. I tried to build it with yarn with no success. I also tried @nuxtjs/auth also with no luck. Is there a way to use NuxtJS auth with NuxtJS3?

score 1 · Answer 1 · answered Dec 15 '22 at 01:24

As of today, this is the only auth module that can be used with Nuxt3 as confirmed here. The team is working on an official one, it's on the roadmap but not done yet.

You can probably follow that Github issue to get some updates and essentially more info.

You can also try to google for a blogpost regarding that subject and implement it on your side with a composable and a few checks on a middleware.

NuxtJS3 + Nuxt auth-next - Cannot read properties of undefined (reading 'options')

1 Answers1