duplicate namespace auth/ for the namespaced module auth

Question

I've been getting this error after installing nuxtjs module. I have tried every trick in the book to fix it, but seems like nothing is working.Added more information.

[vuex] duplicate namespace auth/ for the namespaced module auth

I've been frustrated with it.

auth: {
    plugins: [{ src: '~/plugins/axios', ssr: true }, '~/plugins/auth.js'],
    vuex: {
      namespace: 'auth'
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: "login",
            method: "post",
            propertyName: "meta.token"
          },
          user: {
            url: "me",
            method: "get",
            propertyName: false
          },
          logout: {
            url: "logout",
            method: "post"
          },
          redirect: {
            login: "login",
            logout: "/",
            home: "/",
            callback: "/"
          },
          watchLoggedIn: true,
          rewriteRedirects: true
        }
      }
    }
  },

Plugins

plugins: [
    { src: "~/plugins/Maps.js", ssr: false },
    { src: "~/plugins/Typed.js", ssr: false },
    { src: "~/plugins/Animate.js", ssr: false },
    { src: "~/plugins/Counter.js", ssr: false },
    { src: "~plugins/Vimeo.js", ssr: false },
    "~plugins/mixins/user.js",
    "~plugins/mixins/validation.js",
  ],

auth.js <<---- Store

export const getters = {
    authenticated(state) {
        return state.loggedIn;
    },
    user(state) {
        return state.user;
    }
};

export const state = () => ({
    busy: false,
    loggedIn: false,
    strategy: "local",
    user: false
});

Following is the code, i currently have. If you need to see any other file, feel free to let me know.

https://www.youtube.com/watch?v=FojAfwueTLc

Answer 1

Faced the same issue today after an update. To resolve:

Move the auth.js logic to index.js and delete auth.js.

index.js:

export const getters = {
    authenticated(state) {
      return state.auth.loggedIn
    },

    user(state) {
      return state.auth.user
    }
  }

If you are using a user.js mixin revise it as follows:

import Vue from 'vue'
import {mapGetters} from 'vuex'

    const User = {
        install(Vue, options) {
            Vue.mixin({
                computed: {
                    ...mapGetters({
                        user: 'user',
                        authenticated: 'authenticated'
                    })
                }
            })
        }
    };

    Vue.use(User);

Answer 2

You probably have a file inside your store folder called "auth.js" and you did not explicitly set vuex.namespace option in your nuxt.config.js file.

From the documentation:

every .js file inside the store directory is transformed as a namespaced module (index being the root module).

So that means, "auth" becomes a namespace automatically.

The issue is "auth" is also the default Vuex store namespace for keeping state because "vuex.namespace" option in your nuxt.config.js file is "auth" by default if none is set explicitly. That is where the duplicate comes.

To solve this, change your store/auth.js to something different like store/authentication.js or change your vuex.namespace option in your nuxt.config.js file to something other than "auth" or else it will be used as default.

Answer 3

By default, Nuxt use auth namespace to reserve authentication information. If you also create a file auth.js in store directory then there will be conflict with default configuration.

The solution which provided by "Panos" is completely okay. But if you are really interested to create a new module to maintain auth info as like you, then you could create a file Auth.js instead of auth.js in store directory. Which won't conflict default namespace.

Then you could return auth information from nuxt auth module, like as below. Here i catch auth module's state using rootState

export const getters = {
authenticated(state, getters, rootState) {
 return rootState.auth.loggedIn;
},

user(state, getters, rootState) {
 return rootState.auth.user;
}
};

Also if you are using a user.js mixin revise it as follows:

import Vue from "vue";
import { mapGetters } from "vuex";

const User = {
  install(Vue, options) {
  Vue.mixin({
  computed: {
    ...mapGetters("Auth", {
      user: "user",
      authenticated: "authenticated"
    })
  }
});
}
};
Vue.use(User);