Export default was not found

Question

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?

Use `export default function...` and see answers to [What is "export default" in Javascript?](https://stackoverflow.com/questions/21117160/what-is-export-default-in-javascript) — Jordi Nebot, Sep 01 '17 at 07:22
Possible duplicate of [What is "export default" in javascript?](https://stackoverflow.com/questions/21117160/what-is-export-default-in-javascript) — nu11p01n73R, Sep 01 '17 at 07:26
*"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?](https://stackoverflow.com/q/36795819/218196) — Felix Kling, Sep 01 '17 at 07:31

score 75 · Accepted Answer · answered Sep 01 '17 at 07:42

75

You have to specify default explicitly:

export default function translateDate(date) {
   ..
}

answered Sep 01 '17 at 07:42

Danil Speransky

29,891
5
68
79

Thanks, It was caused by a Visual Studio shortcut I was using in my .jsx components and pages. I used rafc(ReactArrowFunctionComponent) instead of rafce(ReactArrowFunctionExportComponent). all errors fixed now. rafc didn't have export default Component. – Tankiso Thebe May 24 '22 at 15:15

score 68 · Answer 2 · answered Apr 22 '21 at 12:54

68

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

import { CustomComponent } from './CustomComponent';

with

import CustomComponent from './CustomComponent';

answered Apr 22 '21 at 12:54

pushStack

3,315
1
15
14

5

And I had to add the `{}` to get rid of the message – Barbara Krausz Jul 29 '21 at 05:56
7

Worked for me as well. But why? – Chris Pillen Sep 25 '21 at 07:25
I removed {} but I do not know why this solves this issue, I am using Laravel8 and vue 2. – Ivandez Nov 10 '21 at 01:49
i am using react, this worked for me – suhailvs May 17 '22 at 08:43
1

Reason for why this works https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import – Neeraj Jain Nov 14 '22 at 20:01

score 57 · Answer 3 · answered Apr 21 '18 at 08:40

57

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"

answered Apr 21 '18 at 08:40

Alex D

970
6
13

5

When I use the code you provided, I have this issue : "export 'default' (imported as 'doWork') was not found in './mymodule' – HRK44 Aug 07 '18 at 09:24
1

That's because you didn't export the thing you wanted to export in your module, or you're using a different name for it. When using named exports you need to use the same name in both files. – Alex D Feb 22 '19 at 15:28
What if my function looks like this : export const function = (arg) => { } – pushStack Nov 14 '20 at 18:55
2

I use curly brases, and exported the function. still getting this error – Sh eldeeb Dec 14 '20 at 11:59

score 2 · Answer 4 · answered Aug 19 '21 at 12:38

2

Maybe you have two files with the same name.For example, "test.vue" and "test.js"

answered Aug 19 '21 at 12:38

dangdangdanglll

21
1

score 2 · Answer 5 · answered Apr 27 '22 at 05:49

2

Rather than using

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

use

     function translateDate(date){
         //code
          }

export default translateDate;

it worked for me...

answered Apr 27 '22 at 05:49

Jason Dsouza013

21
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 27 '22 at 09:17

score 1 · Answer 6 · answered Nov 08 '19 at 09:29

1

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

config.resolve.symlinks(false);

answered Nov 08 '19 at 09:29

Farid Vatani

626
1
7
24

Export default was not found

6 Answers6

Linked