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

Utilizing Javascript or XUL windows without the use of iframes offer

Handling multiple render calls and rerenders in React function components with setTimeout (best practice for firing multiple times)

"Exploring JSON data with jQuery: A guide to efficient search techniques

Exploring the differences between React state and CSS :hover in the context of a dropdown menu that is accessible to both desktop users (via mouse) and

Axios encounters CORS issues, while fetch operates smoothly

Vue and TypeScript: The elusive 'exports' remains unidentified

Assign Attribute to a Different Data Transfer Object

Ways to display the modal once the user initiates the action

Tips for executing a callback function when triggering a "click" event in jQuery?

Passing an array list back to the parent component in ag-grid(Vue) - A step-by-step guide

What is the best way to utilize getInitialProps specifically during the building process of a NextJS site?

Is there a way to dynamically fetch and run JavaScript code from the server without resorting to the use of the

ajaxStart - Display change inconsistency

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

What is the maximum number of JavaScript functions allowed in a single HTML file?

The duration required to render DOM elements

Tips for smoothly animating and showing content as the user scrolls to a specific element on the page

Retrieve the maximum number of slots from a JSON file and implement them into the

Issues with Mega Menu functionality preventing items from being clickable and links from properly navigating

Transferring files and information using the Fetch API