ES6 syntax causes import class function to malfunction

Question

ES6 syntax causes import class function to malfunction

I'm having an issue while trying to import and initialize a class in ES6. When I run the code, the console displays an error message stating 'undefined property hej'.

Work.js

class Work {

    constructor() {

    }

    hej() {
        alert('hej');
    }
}

export default Work;

Main.js

import Work from './modules/work.js';


Work.hej();

What could be causing this error? Any suggestions on how to resolve it?

javascript ecmascript-6

Answer 1

Answer №1

Your Task function does not have a hey property. The hey property belongs to the prototype that would be assigned to an instance of New Task, so:

const t = new Task();
t.hey();

Alternatively, if you prefer to use it as Task.hey();, make it static:

class Task {
    static hey() {
//  ^^^^^^-----------------
        alert("hey");
    }
}

Now, Task.hey() will work because hey is a static method (a method of Task, not of instances of Task).

If you try using this plunker on the latest version of Chrome, it should demonstrate that it's functioning with an instance method. Here are the source files:

index.html:

<!DOCTYPE html>
<html>

  <body>
    <script type="module" src="task.js"></script>
    <script type="module" src="app.js"></script>
  </body>

</html>

task.js:

class Task {
    constructor() {
    }

    hey() {
        document.body.appendChild(
          document.createTextNode("hey")
        );
    }
}
export default Task;

app.js:

import Task from './task.js';

const t = new Task();
t.hey();

If you use this one on the most recent version of Chrome, it'll show that it's working (with a static method). Here's the source:

index.html (same as above)

task.js:

class Task {
    constructor() {
    }

    static hey() {
        document.body.appendChild(
          document.createTextNode("hey")
        );
    }
}
export default Task;

app.js:

import Task from './task.js';

Task.hey();

Please note that module support in Chrome is very new; you must have the latest updates installed (as of late October 2017).

Answer 2

Your Task function does not have a hey property. The hey property belongs to the prototype that would be assigned to an instance of New Task, so:

const t = new Task();
t.hey();

Alternatively, if you prefer to use it as Task.hey();, make it static:

class Task {
    static hey() {
//  ^^^^^^-----------------
        alert("hey");
    }
}

Now, Task.hey() will work because hey is a static method (a method of Task, not of instances of Task).

If you try using this plunker on the latest version of Chrome, it should demonstrate that it's functioning with an instance method. Here are the source files:

index.html:

<!DOCTYPE html>
<html>

  <body>
    <script type="module" src="task.js"></script>
    <script type="module" src="app.js"></script>
  </body>

</html>

task.js:

class Task {
    constructor() {
    }

    hey() {
        document.body.appendChild(
          document.createTextNode("hey")
        );
    }
}
export default Task;

app.js:

import Task from './task.js';

const t = new Task();
t.hey();

If you use this one on the most recent version of Chrome, it'll show that it's working (with a static method). Here's the source:

index.html (same as above)

task.js:

class Task {
    constructor() {
    }

    static hey() {
        document.body.appendChild(
          document.createTextNode("hey")
        );
    }
}
export default Task;

app.js:

import Task from './task.js';

Task.hey();

Please note that module support in Chrome is very new; you must have the latest updates installed (as of late October 2017).

ES6 syntax causes import class function to malfunction

Answer №1

Similar questions

How can I use AJAX to remove {{$key}} in Laravel?

Pick Control - Utilize jQuery to display options that haven't been chosen before

Tips for dynamically inserting a new column into a table at any position other than the beginning or end

Using traditional JavaScript, bring in a class from Node.js

Enhance PHP search functionality by showcasing hidden auto-complete suggestions in real-time

Is it possible to create a dynamic HTML element with an AngularJS Directive without using $scope?

Having trouble retrieving JSON response from URL with javascript

Receiving a Promise<fullfield> as a result

Preventing CSRF attacks using AJAX in a Django application

Issues with sending data using ajax

Use Angular to change the style of multiple element groups at the same time when hovering

Troubleshooting Bootstrap bug caused by rollupPluginBabelHelpers

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

Express error handling lacking clarity

Connecting UserIDs with Embedded Documents in Mongoose

Is there a way to retrieve the value from a moment-formatted date picker in the (YYYY-MM-DD) format?

Issue with Webpack - npm run start and build operation not functioning?

Unable to retrieve data list in Angular TypeScript

Save the current time and date to a database by executing a mysql_query

What methods can be used to broaden configuration variables within VSCode using an extension?