CODEWITHSUNDEEP
javascriptimportmoduleecmascript-6vue.js
Leff
Leff

Reputation: 1330

Export default was not found

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?

Upvotes: 105

Views: 319996

Answers (8)

najifka
najifka

Reputation: 1

In my case I had to add * as before the imported component.

Before:

import styleClasses from "./Alert.module.scss"

After (it works):

import * as styleClasses from "./Alert.module.scss"

Upvotes: 0

hazrat sultani
hazrat sultani

Reputation: 1

in my case, i changed my code to this:

const registerUsers = (users) => {
    return http.post(`${config.toplearnapi}/api/register`, 
                     JSON.stringify(users));
};

export default registerUsers;

and when i imported this function i removed the braces which was around it: this is the correct one:

import registerUsers from "../services/userServices";

Upvotes: 0

Jason Dsouza013
Jason Dsouza013

Reputation: 21

Rather than using

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

use

     function translateDate(date){
         //code
          }

export default translateDate;

it worked for me...

Upvotes: 2

dangdangdanglll
dangdangdanglll

Reputation: 21

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

Upvotes: 2

pushStack
pushStack

Reputation: 4313

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

import { CustomComponent } from './CustomComponent';

with

import CustomComponent from './CustomComponent';

Upvotes: 98

Farid Vatani
Farid Vatani

Reputation: 629

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

config.resolve.symlinks(false);

Upvotes: 1

Alex D
Alex D

Reputation: 980

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"

Upvotes: 58

Danil Speransky
Danil Speransky

Reputation: 30453

You have to specify default explicitly:

export default function translateDate(date) {
   ..
}

Upvotes: 79

Related Questions