Issue with require()

How-to Discussions
1

Hello there,

Apologies if this is a really basic thing. It’s quite likely i’m just not understanding how Includes works correctly. I have been trying to get this code working for the better part of the day now.

My build is throwing an error due to my API file not being included correctly

 [Viewport]: Error: : Uncaught require(): module not found: API in Fuse.Scripting.DiagnosticSubject<Javascript/LoginPage.js:3>

API.js


var userFunctions = require('userFunctions');
var ROOT_URL = "https://www.pkmntcgvault.com/api/";

//Provides encapsulation for the api fetch
function apiFetch(path, options) {
	var url = encodeURI(ROOT_URL + path);
	console.log(url);
	if(options === undefined) {
		options = {};
	}
	// If a body is provided, serialize it as JSON and set the Content-Type header
	if(options.body !== undefined) {
		options = Object.assign({}, options, {
			body: JSON.stringify(options.body),
			headers: Object.assign({}, options.headers, {
				"Content-Type": "application/json"
			})
		});
	}

	// Fetch the resource and parse the response as JSON
	console.log(JSON.stringify(options));
		return fetch(url, options)
		.then(function(response) {
			return response.json();
		});
}

//Logs the user in and passes the token over to userFunctions returns a 1 on succ 2 on bad login and 3 on error
function userLogin(args) {
	console.log("userLogin Function Initiated");

  return apiFetch("login.php", {
		method: "POST",
		body: {
			userEmail: args[0],
			userPassword: args[1]
		}
	}).then(function(responseObject) {
    var tokenData = responseObject;
    console.log(tokenData);
  });
}

//Retrieves the categories and set lists for display
function getSets() {

}

//Retrieves a sets cards
function getCards() {

}

//Updates card QTY condition etc.. EZ worst function AU
function updateCard() {

}


module.exports = {
userLogin: userLogin,
getSets: getSets,
getCards: getCards,
updateCard: updateCard,
};

LoginPage.js

var Observable = require("FuseJS/Observable");
var API = require("API");

var userName = Observable("");
var userPassword = Observable("");
var data = Observable();


/*function init() {
	if (userFunctions.tokenSet()) {
		//dont display the login page and navigate to the root view.
		//console.log("userToken:" userFunctions.getToken());
	} else {

		//display the login page and deny access to any other activities
	}
}
*/

function loginClicked() {

	console.log("loginClicked Function intiated");
	//Collect the username and password and arrify it
	var args = [];
		args.push(userName.value);
		args.push(userPassword.value);
	//Pass the username and password args
		API.userLogin(args);
}


module.exports = {
	userName: userName,
	userPassword: userPassword,
	loginClicked: loginClicked,
};

//init();

unoproj

{
  "RootNamespace": "",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.Charting",
    "Fuse.UXKits.Alive"
  ],
  "Includes": [
    "*",
    "Javascript/**.js:Bundle"
  ],
  "Projects": [
    "fuse_modules\\bolav\\fuse-usersettings\\usersettings_include.unoproj"
  ],
  "Excludes": [
    "fuse_modules/"
  ],
  "FusePM": {
    "Dependencies": [
      "https://github.com/bolav/fuse-usersettings"
    ]
  }
}

Any explanation of what i’m doing wrong would be fantastic. Thanks heaps. Also i apologise if this was posted under the wrong category.

2

Hello

Where in the file system is API, relative to your project and LoginPage.js? Even if the two files are both in your JavaScript folder, you need to reference API from the root of the project, like this: JavaScript/API.js

3

Hey there Liam. I have references it under includes in the project folder and it’s still throwing the error.

  ],
  "Includes": [
    "*",
    "Javascript/**.js:Bundle",
    "Javascript/API.js"
  ],
4

@Tarriq: as Liam suggested, the second line in your LoginPage.js needs to be:

var API = require("Javascript/API");