Browserify uncaught reference error - javascript

I am using browserify to be able to use the validator npm module client side. I have linked the bundle.js file created by browserify to the HTML page I would like to use the validator module on.
Here is the code from my bundle.js file:
const validator = require('validator');
console.log('Before function');
function validEmail() {
// var email = document.getElementById('contact_details').value;
// console.log(email);
alert('hi');
};
console.log('After function');
Within the bundle.js file I have created a function, however when I call the function within the HTML page it comes up with this error, here is the console output from the HTML page:
bundle.js:4 Before function
bundle.js:12 After function
general-work:11 Uncaught ReferenceError: validEmail is not defined(…)
The two console logs both run correctly showing that the file is linked and is reading the code from the bundle.js file, but for some reason it is not allowing me to run the function saying it isn't defined.
Thanks

Related

Calling A Function from the main.ts file to other ts file is not working in Node js

I have a project in Node JS with the following structure:
ormconfig.js
package.json
src
main.ts
user
user.module.ts
user.entity.ts
user.service.ts (include a function "this.reposiroty.find(...)")
mailer
mailer.module.ts
mailer.service.ts
mailer.listener.ts ("the problem is here")
"main.ts" calls a function in "mailer.listener.ts", then "mailer.listener.ts" calls in its turn the function FindAlltoAlert in "user.service.ts", accordingly, an error printed to the console (Error: Cannot read property 'find' of undefined), which is generated when "mailer.listener.ts" calls function FindAlltoAlert in "user.service.ts".
Please advise!

Browserify: Uncaught error when requiring js file by path created from string concatenation

I am using browesify for client side app. I have files maps.js and directions.js sitting besides my index.js file, and inside my index.js, I have a function getPageName() which returns the name of the file that I should "require". When I try to do
var pageName = getPageName();
var page;
if (pageName === 'maps') {
page = require('./maps');
} else if (pageName === 'directions') {
page = require('./directions');
}
it works fine. But when I instead try to use following trick to minimize my code,
var pageName = getPageName();
var page = require('./' + pageName);
I get error Uncaught Error: Cannot find module './maps' in console log in Chrome. Why does it not work when I use string concatenation but works when I use pass the path explicitly?
That is a limitation of Browserify and similar type libraries. In order to do the require() the library has to examine the js code as a string, and determine file paths before the code is run. This means file paths have to be static in order for it to be picked up.
https://github.com/substack/node-browserify/issues/377
Browserify can only analyze static requires. It is not in the scope of
browserify to handle dynamic requires

Issues Integrating ACE Editor with Keystonejs App

It says here(http://ace.c9.io/#nav=embedding) just copy one of src* subdirectories somewhere into your project
I have put it in mykeystoneapp/public/js(my default home is mykeystoneapp/public)
Here are the errors I get:
1.Uncaught TypeError: $.cookie is not a function(ui.js:8)
2.Uncaught Error: Missed anonymous define() module: function …(require.js:141)
http://requirejs.org/docs/errors.html#mismatch
Here is my Jade code:
script(src='/js/ace/demo/kitchen-sink/require.js')
script.
require.config({paths: {ace: "/js/ace/build/src"}});
define('testace', ['ace/ace'],
function(ace, langtools) {
console.log("This is the testace module");
var editor = ace.edit("editor_container");
editor.setTheme('eclipse');
editor.session.setMode('javascript');
require(["/js/ace/lib/ace/requirejs/text!src/ace"], function(e){
editor.setValue(e);
})
});
require(['testace']);
Secondly if I put debugger in EventEmitter(https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L3300)
I can see it’s properly reaching EventEmitter._dispatchEvent with
eventName=‘changeMode’ but it returns without any operation as there are no !listeners or defaultHandler
editor.session.setMode('javascript'); is wrong, it should be editor.session.setMode('ace/mode/javascript'); instead. Same for theme which is supposed to be ace/theme/eclipse.
error in ui.js is not related to ace, since ace doesn't have a file named ui.

Importing other .js files in Buster.js tests

I'm making my first attempt at Javascript testing, with Buster.js
I've followed the instructions at the Buster site to run "states the obvious" test. However, I haven't been able to import any of my existing .js files into the tests.
For instance, I have a file js/testLibrary.js, containing:
function addTwo(inp) {
return inp+2;
}
and a file test/first-test.js, containing:
// Node.js tests
var buster = require("buster");
var testLibrary = require("../js/testLibrary.js");
var assert = buster.referee.assert;
buster.testCase("A module", {
"Test The Library": function() {
result = addTwo(3);
console.log(result);
assert(true, 'a message for you');
}
});
Running buster-test gives:
Error: A module Test The Library
ReferenceError: addTwo is not defined
[...]
Replacing result = addTwo(3); with result = testLibrary.addTwo(3); gives:
Error: A module Test The Library
TypeError: Object #<Object> has no method 'addTwo'
[...]
I'm probably missing something really basic, but at present, I'm completely stumped. Can someone point me in the right direction?
That is because you are not exporting this function from the module.
Take a look at that:
http://nodejs.org/api/modules.html#modules_module_exports

Accessing required-function when js files are in Data folder

I am using Mozilla Addon builder (Node.js/common.js) to build a FireFox addon. Please note, I have the files in question (explained later) in the Data-Folder that the builder gives you by default.
In the Data folder (comes by default) I have two files: file1 and file2:
File1
exports.foo = foo;
functions foo() {
return true
}
File2
$('#aTestButton').click( function() {
try
{
//The problem: An exception is thrown due to the code below. The exception is:
//ReferenceError: require is not defined
var A_Module = require('file1.js');
var fooValue = A_Module().foo();
}
catch(err)
{
alert(err);
}
});
file1 has a function I am trying to export while file2 tries to consume file1's exported function. The problem I have is that file2 throws this exception:
ReferenceError: require is not defined
Does anyone know how to fix this (note, it works fine when they are in Lib-folder, but I need them in the Data-Folder)?
#Phil: you cannot share code between the data folder (can interact with content) and the lib folder ( can interact with Mozilla apis directly) for security reasons. If you need to communicate between the two, you need to use asynchronous message passing. For more info on how all of this works, see the docs: https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/dev-guide/addon-development/web-content.html

Categories

Resources