# Access an already instancied JS file

**URL:** <https://forums.fusetools.com/t/access-an-already-instancied-js-file/6481>\
**Category:** How-to Discussions\
**Created:** [February 8, 2017, 7:21pm UTC](https://forums.fusetools.com/t/access-an-already-instancied-js-file/6481 "2017-02-08T19:21:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wilton\_Augusto](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/wilton_augusto/32/336_2.png) [@Wilton\_Augusto](https://forums.fusetools.com/u/Wilton_Augusto)\
**Post date:** [February 8, 2017, 7:21pm UTC](https://forums.fusetools.com/t/access-an-already-instancied-js-file/6481/1 "2017-02-08T19:21:25Z")

</div>

Hi.  
I apologize if this is a repeated question but the answers I found didn’t solve my problem.

I want to access a instance of a JS file in other JS file somewhere else im my project.  
the structure would be somenthing like this:

Main.ux

```auto
<App>
	<JavaScript File="someJS.js"/>
</App>

```

someJS.js

```auto
var someValue = "value";

module.exports = {
	someValue : someValue 
}

```

another.ux

```auto
<JavaScript File="anotherJS.js"/>

```

anotherJS.js

```auto
var otherValue = someValue; 

```

I know that this is not the correct way to get this values but I already tried some things.

I’ve already tried to give a global name to my JS load markup but it dosent work.

Main.ux

```auto
<App>
	<JavaScript File="someJS.js" ux:Global="nameSomeJS"/>
</App>

```

anotherJS.js

```auto
var nSomeJS = require("nameSomeJS");
var otherValue = nSomeJS.someValue; 

```

this approach gives the following error

```auto
LOG: Error: JavaScript error in anotherJS.js line 1: Error message: Uncaught require(): module not found: nameSomeJS
    File name: anotherJS.js
    Line number: 1
    Source line: (function(module, exports, require, popupAlert, showPopupEvent) { var t = require("nameSomeJS");
     in Fuse.Reactive.JavaScript<C:\Users\AppData\Local\Fusetools\Packages\Fuse.Reactive\0.44.1\$.uno:1670>

```

I’ve also tried to require the JS file the but it generates a new instance of the module.exports object and the changes made in the required object does not propagate to the JS file loaded in the Main.ux file.

anotherJS.js

```auto
var nSomeJS = require("someJS.js");
nSomeJS.someValue = otherValue; //this works but not the way I want

```

I was able to achieve what I want using userEvents and functions in my JS file to access and change my variables but I was wondering if there is a more direct, and efficient way to do this.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [February 10, 2017, 5:39pm UTC](https://forums.fusetools.com/t/access-an-already-instancied-js-file/6481/2 "2017-02-10T17:39:12Z")

</div>

Hi!

In order to access js variables across files they should be defined as freestanding js-files (instead of declared with `<JavaScript />` in UX).

Make sure you add these javascript files as Bundle files in your unoproj ([https://www.fusetools.com/docs/assets/bundle](https://www.fusetools.com/docs/assets/bundle))

Here is an example:  
shared js module:  
shared.js

```auto
var foo = "Bar";
module.exports = { foo: foo };

```

MainView.ux

```auto
<App>
  <JavaScript>
    var sharedFoo = require("shared").foo;
  </JavaScript>
</App>

```

and this can be done from any other module:  
CustomClass.ux

```auto
<Panel ux:Class="CustomClass">
  <JavaScript>
    var sharedFoo = require("shared").foo;
  </JavaScript>
</Panel>

```

did this answer your question?

---

<div class="post-metadata">

**Author:** ![Wilton\_Augusto](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/wilton_augusto/32/336_2.png) [@Wilton\_Augusto](https://forums.fusetools.com/u/Wilton_Augusto)\
**Post date:** [February 11, 2017, 12:32pm UTC](https://forums.fusetools.com/t/access-an-already-instancied-js-file/6481/3 "2017-02-11T12:32:04Z")

</div>

Thank you very much for your answer.  
I was able to achieve what I wanted creating uno classes but this approach is simpler.  
My goal was to create some global variables that could be accessed and changed anywhere in the project to control user states in the app.

Trying your suggestion I got this output.

shared.js

```auto
var someValue = "standard value";
module.exports.someValue = someValue;

```

Main.ux

```auto
<App>
	<JavaScript>
		var s1 = require("shared");
		console.log("first call:"+s1.someValue);

		module.exports.valueUX = s1.someValue;
	</JavaScript>
	<JavaScript>
		var s2 = require("shared");
		s2.someValue = "new value";
	</JavaScript>
	<JavaScript>
	var s3 = require("shared");
		console.log("third call :"+s3.someValue);
	</JavaScript>
	<Text Value="{valueUX}"/>
</App>

```

Screen

```auto
new value

```

Monitor

```auto
LOG: first call:new value
LOG: third call :new value

```

As you can see I managed to change the value of someValue globally and even the UX got the value update. But I just can’t understand why my first log did not output “standard value” since I only changed someValue in the second JavaScript tag.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [February 13, 2017, 6:46am UTC](https://forums.fusetools.com/t/access-an-already-instancied-js-file/6481/4 "2017-02-13T06:46:59Z")

</div>

Hi!

In this case you can’t be certain of when each JavaScript module is evaluated; the order should be considered undefined. It is also a very bad idea to have several `JavaScript` tags next to each other. I would suggest sticking with one per class.