Export default was not found

60
votes

I have a Vue 2 project, and I've written a simple function for translating months in dates, which I would like to import in one of my components, but I'm getting an error:

export 'default' (imported as 'translateDate') was not found in '@/utils/date-translation'

The relative file path from the src folder is correct, and I am exporting the function like this:

export function translateDate(date) {
  // my code
}

And then I am importing it in the component like this:

import translateDate from '@/utils/date-translation'

What am I doing wrong?

4
javascriptimportmoduleecmascript-6vue.js
Use export default function... and see answers to What is "export default" in Javascript? - Jordi Nebot
Possible duplicate of What is "export default" in javascript? - nu11p01n73R
"What am I doing wrong?" You are trying to import the default export of a module which does not have a default export. The module only has a named export, translateDate. You should have a look at the accepted answer of When should I use curly braces for ES6 import? - Felix Kling

4 Answers

52
votes

You have to specify default explicitly:

export default function translateDate(date) {
   ..
}
41
votes

Either specify default as mentioned above, or if you're trying to export multiple items from the same file you need to import them with curly brackets.

So you would have:

export function doWork(){}
export const myVariable = true;

And then you'd import them in a separate file as:

import { doWork, myVariable} from "./myES6Module"
3
votes

In my case I had to remove '{' and '}' arround the imported component :

import { CustomComponent } from './CustomComponent';

with

import CustomComponent from './CustomComponent';
1
votes

You need to set symlink setting in vue.config.js

config.resolve.symlinks(false);