JavaScript export functions in vue component failed

Question

I wanted to simplify my code, so i put some functions in a js file like that :

[...]
function changeToEditView(reportId)
{
    let pathEdit="/edit/"+reportId;
    this.$router.push({ path: pathEdit, replace: true });
}
[...]
export {convertDate, deleteReport, changeToEditView, getPdfByReportId}

and when I import them in my vue component like that

import axios from 'axios'
import convertDate from '@/js/methods' 
import deleteReport from '@/js/methods'
import changeToEditView from '@/js/methods'
import getPdfByReportId from '@/js/methods'
export default 
{
[...]
methods:
    {
        convertDate,
        deleteReport,
        changeToEditView,
        getPdfByReportId,

I have this message :

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'deleteReport') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'changeToEditView') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'getPdfByReportId') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

I tried to put 'default' after export in te js file like that but none of these functions work

export default {convertDate, deleteReport, changeToEditView, getPdfByReportId}

you'll want `import {convertDate, deleteReport,changeToEditView,getPdfByReportId } from '@/js/methods'` — Bravo, Apr 20 '22 at 12:17
It's written this for all 4 functions : export 'changeToEditView' (imported as 'changeToEditView') was not found in '@/js/methods' (possible exports: default) — Malo Ménard, Apr 20 '22 at 12:20
I tried all of the things I found on internet, even your comment. And it still doesn't work. — Malo Ménard, Apr 20 '22 at 12:34
if you `export {convertDate, deleteReport, changeToEditView, getPdfByReportId}` then you definitely can `import {convertDate, deleteReport,changeToEditView,getPdfByReportId } from '@/js/methods'` without an error - you're doing something else wrong - the error is even telling you that the exports are `changeToEditView, convertDate, deleteReport, getPdfByReportId` — Bravo, Apr 20 '22 at 12:47
"I tried to put 'default' after export in te js file like that but none of these functions work" - it should have been working, similar to the suggested fix. It's unknown why functions don't "work", and it's unknown what this even means. Any way, this is a separate problem that needs to be solved. Imports are fixed this way — Estus Flask, Apr 20 '22 at 12:51
@EstusFlask - if you `export default {a,b,c}` that does not mean you can `import a from ..` and expect `a` to be `a` ... `a` would be `{a,b,c}` - sure, the error WILL disappear, but those imports will not be as expected — Bravo, Apr 20 '22 at 12:58
@Bravo True, this would need to use `methods: { ...methods, ... }` then — Estus Flask, Apr 20 '22 at 12:59

Alicia Sykes · Answer 1 · 2022-04-20T13:23:17.380

You've got several issues here.

The first is a simple one. Update your script to export named functions, for example:

export const changeToEditView = (reportId) => {
  let pathEdit="/edit/"+reportId;
  this.$router.push({ path: pathEdit, replace: true });
};

export const deleteReport = () => {
/*  */
};

And then import with:

import { changeToEditView, deleteReport } from '@/src/path-to-file';

You'll then be able to use these methods within your Vue component. You don't need to register them first, nor do you need to use this..

For example:

methods: {
  doStuff() {
    deleteReport();
    changeToEditView();
  },
},

This answer explains the differences between named exports and default exports in a bit more detail.

The next issue, is that this.$router isn't going to be accessible like this. You will need to import your instance of Vue router to call .push on it.

JavaScript export functions in vue component failed

1 Answers1