Vue.js Error export was not found when using import { }

Question

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 {
  components: {
    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.com/toricls/5c38d2930a36262f0674c1ffa8d5134a:

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


const state = {
  user: null,
};

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

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

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

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

    commit(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,
};

Answer 1

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

Answer 2

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 component file but I'm assuming (given the folder naming) that your component 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.