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
– Bravo, Commented Apr 20, 2022 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
– Malo Ménard, Commented Apr 20, 2022 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
– Malo Ménard, Commented Apr 20, 2022 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
– Bravo, Commented Apr 20, 2022 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
– Estus Flask, Commented Apr 20, 2022 at 12:51

Alicia Sykes · Accepted Answer · 2022-04-20 13:23:17Z

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.

Collectives™ on Stack Overflow

JavaScript export functions in vue component failed

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related