# "OOP" JavaScript does not work

**URL:** <https://forums.fusetools.com/t/oop-javascript-does-not-work/5655>\
**Category:** How-to Discussions\
**Created:** [December 1, 2015, 2:44pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655 "2015-12-01T14:44:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [December 1, 2015, 2:44pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/1 "2015-12-01T14:44:15Z")

</div>

Hi!

I figured that I could try to make my code work like “OOP” JavaScript (based on [http://www.phpied.com/3-ways-to-define-a-javascript-class](http://www.phpied.com/3-ways-to-define-a-javascript-class)) to keep it more tidy as I am concatenating it since this is what Fuse seems to like the most.

But I am getting some strange errors, so I made a test-case:

```auto
<!-- MainView.ux -->
<App Theme="Basic">
    <JavaScript File="js.js" />

    <StackPanel>
        <Text Value="{hei}" TextAlignment="Center"/>
        <Button Text="Hade" Clicked="{hade}" />
    </StackPanel>
</App>

```

```auto
//js.js
var Observable = require("FuseJS/Observable");

var test = new function() {
    this.hei = Observable("hei");
    this.hade = function() {
        console.log(this.hei.value);
    }
}

module.exports = {
    "hei": test.hei,
    "hade": test.hade
}

```

I have also tried using ES6 classes transpiled through babel without luck. It didn’t return an error, but I could not manage to refer to the variables. Example:

```auto
let Observable = require('FuseJS/Observable');

export class test {
  construct() {
    this.hei = Observable("Hei");
  }

  hade() {
      this.hei.value = "hade";
  }
}

```

Is this or any of the examples in the article at all supposed to work? It would be great with support for this as it’s really helpful for avoiding duplicate variables and stuff like that.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 1, 2015, 2:47pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/2 "2015-12-01T14:47:43Z")

</div>

What error messages are you getting?

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [December 1, 2015, 2:51pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/3 "2015-12-01T14:51:11Z")

</div>

```
    Name: TypeError
    ErrorMessage: undefined cannot be converted to an object
    FileName: C:\Users\joehol\Documents\Fuse\js-test\js.js
    LineNumber: 6
    JS StackTrace: TypeError: undefined cannot be converted to an object
        at anonymous (C:\Users\joehol\Documents\Fuse\js-test\js.js:6)

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 1, 2015, 3:57pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/4 "2015-12-01T15:57:41Z")

</div>

And what does line 6 say?

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [December 1, 2015, 4:30pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/5 "2015-12-01T16:30:32Z")

</div>

Line #6 is `console.log(this.hei.value);`.

---

<div class="post-metadata">

**Author:** ![Stefan\_Rimaila](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/stefan_rimaila/32/456_2.png) [@Stefan\_Rimaila](https://forums.fusetools.com/u/Stefan_Rimaila)\
**Post date:** [December 1, 2015, 5:33pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/6 "2015-12-01T17:33:52Z")

</div>

Hi,

with doing things the OOP-ish way, you will need to add an `ux:Global` attribute to the JavaScript tag, and then do what you want with the data, and finally export it to where you are using it, like so:

```auto
<App Theme="Basic">
    <JavaScript File="js.js" ux:Global="JSFile" />
    <JavaScript>
        var jsFile = require('JSFile');
        module.exports = {
            hei: jsFile.hei
        }
    </JavaScript>
    <Panel>
        <Text Value="{hei}" />
    </Panel>
</App>

```

Bear in mind that you can only access values, not make calls or invocations to Javascript from; those will need a JavaScript tag to do class/function instantiation, processing, etc. and export the value to the UX scope—so that in your UX code you will only need to care about how to display your data that’s exported.

In regards to the ES6 example you have, where you `export` the class, the issue might be caused if Babel does not result in CommonJS modules, that have explicitly `exports` set to the `module` object.

From looking how Babel transpiles ES6 modules, it’s implicitly depending for the `module` object being global, so doing:

```auto
let Observable = require('FuseJS/Observable');

export class TestClass {
  construct() {
    console.log('new class');
  }
}

```

…actually ends up (just picking out the relevant parts from the transpile) like this:

```auto
var Observable = require('FuseJS/Observable');

var TestClass = (function () {
  function TestClass() {
    _classCallCheck(this, TestClass);
  }

  _createClass(TestClass, [{
    key: 'construct',
    value: function construct() {
      console.log('new class');
    }
  }]);

  return TestClass;
})();

exports.TestClass = TestClass;

```

And this implicit usage of `exports` seems to be one cause or error in the transpiled code. `exports` is undefined, while it’s expected to be an object, and trying to set properties to something that’s undefined will result in an error.

---

<div class="post-metadata">

**Author:** ![Stefan\_Rimaila](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/stefan_rimaila/32/456_2.png) [@Stefan\_Rimaila](https://forums.fusetools.com/u/Stefan_Rimaila)\
**Post date:** [December 1, 2015, 9:20pm UTC](https://forums.fusetools.com/t/oop-javascript-does-not-work/5655/7 "2015-12-01T21:20:01Z")

</div>

To add to the Babel transpiling case, what slipped past me was the typo you had in the ES6 class example, where the class’ constructor had a typo in it; instead of `construct`, it needs to be `constructor`.