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
Related
I am trying out Stitch, a serverless/hosted JavaScript environment from MongoDB. My main purpose is to help me learn modern JavaScript, but I am trying to write a useful app as well.
I have written the following function, and saved it in my Stitch app. I believe this follows the documented way to write functions in Stitch, and I have tested it from the Stitch administration console:
exports = function(query){
const http = context.services.get("HTTP");
const urlBase = context.values.get("stackOverflowApiUrl");
const options = [
'order=desc',
'sort=activity',
'site=stackoverflow',
'q=' + encodeURIComponent(query),
'user=472495',
'filter=!--uPQ.wqQ0zW'
];
return http
.get({ url: urlBase + '?' + options.join('&') })
.then(response => {
// The response body is encoded as raw BSON.Binary. Parse it to JSON.
const ejson_body = EJSON.parse(response.body.text());
return ejson_body.total;
});
};
This code is pretty simple - it obtains an http object for making external API fetches, and obtains a configuration value for a URL urlBase to contact (resolving to https://api.stackexchange.com/2.2/search/excerpts) and then makes a call to the Stack Overflow Data API. This runs a search query against my user and returns the number of results.
So far so good. Now, I want to call this function locally, in Jest. To do this, I have installed Node and Jest in a local Docker container, and have written the following test function:
const callApi = require('./source');
test('Simple fetch with no user', () => {
expect(callApi('hello')).toBe(123);
});
This fails, with the following error:
~ # jest
FAIL functions/callApi/source.test.js
✕ Simple fetch with no user (3ms)
● Simple fetch with no user
TypeError: callApi is not a function
2 |
3 | test('Simple fetch with no user', () => {
> 4 | expect(callApi('hello')).toBe(123);
| ^
5 | });
6 |
at Object.<anonymous>.test (functions/callApi/source.test.js:4:12)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.418s
Ran all test suites.
(In fact I was expecting it to fail, since it contains a global object context that Jest does not have access to. I will work out how to mock that later, but for now Jest cannot even see the function at all).
I suspect I can see the reason - in the Jest introduction docs, one has to do this for the SUT:
module.exports = function() { ... }
However the Stitch docs seem to require functions to be defined as:
exports = function() { ... }
I do not have a background in JavaScript to understand the difference. I could try module.exports in Stitch, but I would rather not, since this would either not work now, or cause a breakage in the future. Can Jest be instructed to "see" bare exports without the module prefix?
Incidentally, I have picked Jest because it is popular, and because some of my JavaScript colleagues vouch for it. However, I am not wedded to it, and would be happy to use something else if it is known to be better for Stitch development.
Update
Following the useful answer from jperl below, I find that the following construction is not possible in Stitch:
module.exports = exports = function() {}
I also cannot do this:
exports = function() {}
module.exports = exports
If I try either, I get the following error:
runtime error during function validation
So it looks like I have to get Jest to work without module.exports, or create a glue file that imports the exports version into module.exports, with the main file being used by Stitch, and the glue importer being used by Jest.
I suggest you to read this thread. And you're right in thinking it has to do with modules.exports vs exports. The thing is that module.exports and exports first point to the same thing. So something like this works:
//modify the same object that modules.exports is pointing to
exports.a = {}
exports.b = {}
but this won't:
exports = {}
Why? Because now exports points to something else than module.exports so what you're doing has no effect at all.
Update
Following some updates in the comments, we came to the view that Stitch does not seem to support the export format that Jest requires.
This is an addendum to jperl's answer, to show how I got Jest working while respecting Stitch's limitations.
Firstly, it is worth noting how a Stitch application is laid out. This is determined by the import/export format.
auth_providers/
functions/
function_name_1/
config.json
source.js
function_name_2/
config.json
source.js
...
services/
values/
The config.json file is created by Stitch remotely, and is obtained through a export. This contains ID information to uniquely identify the function in the same folder.
I believe it is common JavaScript practice to mix tests with source code, so I am following that style (I am new to modern JS, and I confess I find this style untidy, but I am running with it nevertheless). Thus I add a source.test.js file in each function folder.
Finally, since there is a discrepancy between what Stitch requires and what Jest requires, I have written a script to create a source code file under _source.js in each function folder.
So, each folder will contain these files (the underscore files will probably be ignored by Git, as they will always be generated):
_source.js
config.json
source.js
source.test.js
In order to create the underscored copies, I am using this shell script:
#!/bin/bash
# Copy all source.js files as _source.js
for f in $(find functions/ -name source.js); do cp -- "$f" "$(dirname $f)/_$(basename $f)"; done
# Search and replace in all _source.js files
for f in $(find functions/ -name _source.js); do sed -i -e 's/exports =/module.exports =/g' $f; done
A bit hacky perhaps, but it works!
I'm trying to render a twig (with twigjs) template within a chrome extension. I'm currently compiling the following typescript with a browserify build script.
import * as twig from "twig"
const MAIN_TEMPLATE: string = chrome.runtime.getURL("twig/main.html.twig");
document.addEventListener("DOMContentLoaded", () => {
twig.renderFile(MAIN_TEMPLATE, (err: Error, html: string) => {
document.querySelector("body").innerHTML = html;
});
});
I've made sure to include the files in my manifest.json, as such.
...
"web_accessible_resources": [
"twig/*.html.twig"
]
...
However, upon running this, I get the following stacktrace. I'm not really sure what to do, as the URL that chrome.runtime.getURL returns does resolve if I punch it into my address bar.
Uncaught TypeError: t.stat is not a function
at Object.<anonymous> (twig.js:1)
at Object.e.Templates.loadRemote (twig.js:1)
at Object.e.exports.twig (twig.js:1)
at Object.e.exports.renderFile (twig.js:1)
at HTMLDocument.<anonymous> (browser-action.ts:7)
Digging through some of the twigjs source code, it looks like it was a mistake of mine to use the renderFile helper. This is more correct.
const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false};
document.querySelector("body").innerHTML = MAIN_TEMPLATE.render({tabs, tabListTemplate: TAB_LIST_TEMPLATE_URI});
I used async false since it's only going to be getting from a local connection, so there really shouldn't be any lag loading the template synchronously.
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
I cannot seem to access a global variable in Ext.application after I do a production or test build with Cmd 4. This happens during the first application launch. I have read other similar threads but there is nothing new in there that can solve my problem for whatever reason.
Before I started using Cmd, I would run my application from a server against the application directory, and things ran just fine. I had no problems with my other files picking up the global variables.
Now that I have moved to Cmd 4 / ST2.3.1, the test and production builds get built into one big app.js file. So it seems that when code that is earlier in the js file calls a global variable, it cannot find it, with the console exception:
Uncaught TypeError: Cannot read property 'targetServer' of undefined
This happens during the first application launch, and the app just hangs. The loading indicators are not even removed. I noticed that the Ext.application code is at the end of the app.js. Could it be some code is launching before the application is fully loaded?
In my app.js, I have the following. This is last in my app.js at line 76623. The global variable not being read is "targetServer":
Ext.application({
name: 'qxtapp',
targetServer: 'http://192.168.1.70:8080'
...
});
One of my stores looks like this. This is where I get the exception. The below code is earlier in my app.js, at line 70742:
Ext.define('qxtapp.store.AccountsListStore', {
extend : Ext.data.Store ,
xtype : 'accountsListStore',
config: {
model: 'qxtapp.model.AccountsList',
data: [
{ accountName: qxtapp.app.targetServer+'/account_one' },
// ^ Causes exception- cannot read property "targetServer"
// of undefined
{ accountName: qxtapp.app.targetServer+'/account_two' },
...
]
}
})
Any idea what I'm missing here? Any help is greatly appreciated.
Thanks!
This is an order-of-operations error.
In development, your Ext.application() code (in app.js) is run first because any other classes (e.g. qxtapp.store.AccountsListStore) are loaded dynamically after the browser physically reads app.js.
But when you use Cmd to bundle your classes together, the resulting single JS file is read entirely at once by the browser. What happens is that the Ext.define() methods all run BEFORE Ext.application()... so qxtapp.app isn't yet assigned.
The easiest way to circumvent this problem is to use a true global variable, not just a property assigned to the global "app" object (in app.js):
var TARGET_SERVER = 'http://192.168.1.70:8080';
Ext.application({
//...
})
And in your other classes...
Ext.define('qxtapp.store.AccountsListStore', {
extend : Ext.data.Store ,
xtype : 'accountsListStore',
config: {
model: 'qxtapp.model.AccountsList',
data: [
{ accountName: TARGET_SERVER + '/account_one' }
//...
]
}
});
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