In vue.js. I have the following auth.js, at the bottom of the js file it has "export default". In my Registration.vue file how do I access "actions"?

This is what I have tried:

Registration.vue

import {actions} from 'src/util/auth';
export default {
  ponents: {
    actions
  },
  data(){
  },
  methods: { 
    submitReg() {
      console.log(actions)
    }
  }
}

error: export 'actions' was not found in 'src/util/auth'

This is the auth.js file full code here :

import Amplify, { Auth } from 'aws-amplify';


const state = {
  user: null,
};

const actions = {
  async getCurrentUserInfo({ mit }) {
    // This is returning null - why?
    // const user = await Auth.currentUserInfo();
    const user = await Auth.currentAuthenticatedUser();

    const attributes = await Auth.userAttributes(user);
    console.log(attributes);

    mit(types.AUTHENTICATE, {
      username: user.username,
      ...extractAttributes(attributes),
    });
  },

  async signIn({ mit }, { username, password }) {
    const user = await Auth.signIn(username, password);
    const attributes = await Auth.userAttributes(user);

    mit(types.AUTHENTICATE, {
      username: user.username,
      ...extractAttributes(attributes),
    });
  },

  async signOut() {
    await Auth.signOut();
  },

  async signUp(_, { username, password, firstName, lastName }) {
    const data = await Auth.signUp({
      username,
      password,
      attributes: {
        given_name: firstName,
        family_name: lastName,
      },
    });
    console.log(data);
  },
};

const mutations = {
  [types.AUTHENTICATE](state, payload) {
    state.user = payload;
  },
  [types.SIGNOUT](state) {
    state.user = null;
  },
};

export default {
  namespaced: true,
  state,
  actions,
  mutations,
};

In vue.js. I have the following auth.js, at the bottom of the js file it has "export default". In my Registration.vue file how do I access "actions"?

This is what I have tried:

Registration.vue

import {actions} from 'src/util/auth';
export default {
  ponents: {
    actions
  },
  data(){
  },
  methods: { 
    submitReg() {
      console.log(actions)
    }
  }
}

error: export 'actions' was not found in 'src/util/auth'

This is the auth.js file full code here https://gist.github./toricls/5c38d2930a36262f0674c1ffa8d5134a:

import Amplify, { Auth } from 'aws-amplify';


const state = {
  user: null,
};

const actions = {
  async getCurrentUserInfo({ mit }) {
    // This is returning null - why?
    // const user = await Auth.currentUserInfo();
    const user = await Auth.currentAuthenticatedUser();

    const attributes = await Auth.userAttributes(user);
    console.log(attributes);

    mit(types.AUTHENTICATE, {
      username: user.username,
      ...extractAttributes(attributes),
    });
  },

  async signIn({ mit }, { username, password }) {
    const user = await Auth.signIn(username, password);
    const attributes = await Auth.userAttributes(user);

    mit(types.AUTHENTICATE, {
      username: user.username,
      ...extractAttributes(attributes),
    });
  },

  async signOut() {
    await Auth.signOut();
  },

  async signUp(_, { username, password, firstName, lastName }) {
    const data = await Auth.signUp({
      username,
      password,
      attributes: {
        given_name: firstName,
        family_name: lastName,
      },
    });
    console.log(data);
  },
};

const mutations = {
  [types.AUTHENTICATE](state, payload) {
    state.user = payload;
  },
  [types.SIGNOUT](state) {
    state.user = null;
  },
};

export default {
  namespaced: true,
  state,
  actions,
  mutations,
};

• javascript
• vue.js
• ecmascript-6
• vuejs2
• es6-modules

• Is this a Vuex store? If so, it won't work properly even if you fix the import. – Dan Commented Jan 29, 2021 at 17:15
• Can you explain more, please? I'm new to vuejs. I have not used Vuex and don't see it installed or imported tho – MarkK Commented Jan 29, 2021 at 17:33
• Well your module is arranged like a Vuex store but you didn't actually export a store, you exported the objects directly and then tried to import them directly instead of using the store in your ponent. I posted an answer to your question that explains exports in general but you could refer to Vuex docs to see how to setup / use a store properly. You're almost there. – Dan Commented Jan 29, 2021 at 17:47
• I just looked at Vuex, Seems like the right way to go once I have a little more understanding. For now, this will get me half the way but I guess I don't have that persistent state. – MarkK Commented Jan 29, 2021 at 17:49

2 Answers 2

There are two kinds of exports in es6 modules: named and default. When you see the braces { } in an import, that's the named import syntax. It's not the same as destructuring though it looks like it. You can't destructure inside an import statement. Change your code to:

import myExport from 'src/util/auth';
const { actions } = myExport;

Here are some examples of using both kinds of exports:

Default export examples

export default { a: 1, b: 2 } // Default object export

export default "Some string" // Default string export

Import these like:

import myExport from 'mymodule';  // no braces

Named export examples

export const myExport = { a: 1, b: 2 } // named object export

export const myExport = "Some string"  // named string export

Import these like (note the braces):

import { myExport } from 'mymodule'   // braces

I would imagine that this error is happening because it isn't finding the auth.js file. 'src/util/auth' is a relative path (by default in webpack) from the ponent file but I'm assuming (given the folder naming) that your ponent file isn't at the top level.

Either input the correct relative path or setup an absolute path alias within your webpack setup. This is a decent article explaining how to do this.