CODEWITHSUNDEEP
javascriptvue.jsecmascript-6
Kirk Sefchik
Kirk Sefchik

Reputation: 812

export was not found -- but names still work

I'm sure this is obvious, but I'm not seeing why this isn't working at the moment...

I have a file in a Vue project that exports keycodes in a couple different formats, one to be used for constants (allCodes) and another to be used for Vue (keyCodes):

export default {
  allCodes,
  keyCodes
};

When I try to import one of them using deconstruction like this, I get an error:

import { allCodes } from '@/helpers/keycodes';

21:17-25 "export 'allCodes' was not found in '@/helpers/keycodes'

 warning  in ./src/mixins/GlobalKeyPressHandler.js

However, importing then referring to the key by name works:

import object from '@/helpers/keycodes';
console.log('allCodes', object.allCodes);

What gives?

Upvotes: 0

Views: 423

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

If you want named exports it should be 

export {
  allCodes,
  keyCodes
};

Currently you are exporting an object as default.

BTW "I try to import one of them using deconstruction like this" if you mean that you are trying to use destructuring assignment in imports it wont work. Named import statement is not object destructuring though it looks alike in simplest case.

If you want to have default export than you should make assignment below the import statement

export default {
  allCodes,
  keyCodes
};

// importing side
import keycodes from '@/helpers/keycodes';
const { allCodes } = keycodes;

Upvotes: 2

Related Questions