Js function not accessible un ux file?

How-to Discussions
1

So, I have this in a separate JS-file (in /js/filehandler.js)

function getPref(key)
{
    return "hello: " + key;
}

module.exports =
{
    getPref: getPref
}

and in the UX file in /pages/SplashScreen.ux:

<Page ux:Class="SplashScreen">
	<JavaScript File="../js/filehandler.js" />
	<JavaScript>
	        var v = getPref("isFirstStart");
		console.log("v=" + v);
	</JavaScript>

and the error I get

LOG: Error: JavaScript error in pages/SplashScreen.ux line 4: Name: ReferenceError: getPref is not defined
    Error message: Uncaught ReferenceError: getPref is not defined
    File name: pages/SplashScreen.ux
    Line number: 4
    Source line: var v = getPref("isFirstStart");
    JS stack trace: ReferenceError: getPref is not defined
        at null._tempMethod (pages/SplashScreen.ux:4:9)
     in Fuse.Reactive.JavaScript<C:\Users\Ted\AppData\Local\Fusetools\Fuse\App\app-0.27.1.7935\Packages\Fuse.Reactive\0.38.6\$.uno:1389>

I cant figure out whats going on… Anyone? =)

2

Hi Ted,
most likely you’re simply missing the include in your .unoproj file. The Fuse Tutorial section in the docs kind of covers the inclusion of module JS files, which happens to be exactly what you’re trying to achieve.

Judging from the require path, you’d need to add this to the “Includes” section of your .unoproj:

    "js/*.js:Bundle"

Don’t forget a uno clean and restart your preview, all should go well then.

3

I have that include already actually:

{
  "RootNamespace":"",
  "Packages": [
  	"Fuse",
  	"FuseJS"
  ],
  "Includes": [
    "*",
    "js/*.js:Bundle"
  ]
}

So thats not the thing. I did a uno clean too, didnt help, it got worse actually…

4

Okay then, then change your SplashScreen to this:

<Page ux:Class="SplashScreen">
    <!-- <JavaScript File="../js/filehandler.js" /> -->
    <JavaScript>
        var FH = require('js/filehandler');
        var v = FH.getPref("isFirstStart");
        console.log("v=" + v);
    </JavaScript>

So, if that finally works then the issue is that you were trying to simultaneously attach an external JS file as directly connected to this UX, and at the same time having some in-line JS. I imagine that won’t work nicely.

5

Right, tried the require-thing too, but now getting:

Error message: require(): module not found: js/filehandler

I did play around with the unoproj file as I was getting other errors I couldnt understand, but the include is in there now, I did uno clean again, rebuild, restarted the preview, but I still get this error.

6

Well that module not found error hints at a different problem. You should make sure your paths are alright, including the capitalisation of folders and file names.

E.g., make sure the js folder is all lowercase, and the file name of filehandler.js matches that one specified in your require() statement.

Not much else, it should just work.