Attempting to invoke a static function from a imported ES6 module

Question

Attempting to invoke a static function from a imported ES6 module

Currently, I am utilizing Firefox 56 with the setting dom.moduleScripts.enabled enabled. This configuration allows me to engage with native ES6 modules seamlessly.

In my Vue2 component, there is a method that I have defined:

import StorageZonesAjaxMethods from '../../ajax/storage-zones.js';
....
methods: {
        updateList() 
        {
            //console.log(StorageZonesAjaxMethods);
            StorageZonesAjaxMethods.getList();//function(response) { this.list = response.data.payload;});

        },
    },

The class containing these methods looks like this:

export default new class StorageZonesAjaxMethods {

    static getItem(id, then)
    {
        axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`)
            .then(response => then);
    }

    static getList(then)
    {
        alert('in get list');
        axios.get(`${Config.apiBaseUrl}/storage-zones`)
            .then(response => then);
    }

When running this code, I encounter the error message

"TypeError: (intermediate value).getList is not a function"

in Firefox. Surprisingly, the console.log statement does show it as a function, albeit within a constructor. This situation has left me puzzled about what might be happening. Any insights?

javascript module ecmascript-6 vue.js

Answer 1

Answer №1

Avoid using the syntax new class { … } at all costs!

Also, steer clear from default-exporting a class that only contains static methods as shown in this example. It is recommended to simplify it like this:

export default {
    getItem(id) {
        return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
    }
    getList() {
        alert('in get list');
        return axios.get(`${Config.apiBaseUrl}/storage-zones`);
    }
};

Better yet, modify both files and implement the following structure instead:

export function getItem(id) {
    return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
}
export function getList() {
    alert('in get list');
    return axios.get(`${Config.apiBaseUrl}/storage-zones`);
}

import * as StorageZonesAjaxMethods from '../../ajax/storage-zones.js';

Answer 2

Avoid using the syntax new class { … } at all costs!

Also, steer clear from default-exporting a class that only contains static methods as shown in this example. It is recommended to simplify it like this:

export default {
    getItem(id) {
        return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
    }
    getList() {
        alert('in get list');
        return axios.get(`${Config.apiBaseUrl}/storage-zones`);
    }
};

Better yet, modify both files and implement the following structure instead:

export function getItem(id) {
    return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
}
export function getList() {
    alert('in get list');
    return axios.get(`${Config.apiBaseUrl}/storage-zones`);
}

import * as StorageZonesAjaxMethods from '../../ajax/storage-zones.js';

Answer 3

Answer №2

Remember this lesson - avoid coding when you're feeling tired. The line

export default new class StorageZonesAjaxMethods

within the class was found to have an unnecessary new keyword.

Answer 4

Remember this lesson - avoid coding when you're feeling tired. The line

export default new class StorageZonesAjaxMethods

within the class was found to have an unnecessary new keyword.

Attempting to invoke a static function from a imported ES6 module

Answer №1

Answer №2

Similar questions

Having trouble with sending an ajax PUT request

Modifying Props in Reactjs: Ways to update data passed from parent component to child component

Failed to build development environment: Unable to assign the attribute 'fileSystem' to a null value

Can you explain the mechanics behind Angular Component CSS encapsulation?

When attempting to pass a token in the header using AngularJS, I encounter an issue with my NodeJS server

Unusual layout in Next.js editor (VS Code)

Error: The term "Worker" is undefined in a new Nextjs project

Looking for assistance in resolving the error message: 'state' is not defined no-undef

Can Selenium WebDriver be utilized to automate tasks in desktop applications?

Sorting technique failing to reorganize list

Exploring the World of 3D Rotation with Three.js

Using Thymeleaf in a Spring Boot application, the modal automatically closes after submission

React Component for Toggling a Click Event on a Select Tag

A guide to displaying a countdown timer in an Angular application during the app's loading process

AngularJS - retrieving and displaying the selected value from an HTML dropdown menu

Mastering React children: A guide to correctly defining TypeScript types

Is it possible to implement drag and drop functionality for uploading .ply, .stl, and .obj files in an angular application?

What is the process for adjusting the form transition?

Eliminating an element from an object containing nested arrays

Textfield removal from the input range is requested