I am using plovr to run unit tests for my JavaScript code that uses Google Closure Library. My setup was working fine until I needed to run some asynchronous tests. I found out from this discussion that I needed to replace the default org.plovr.test.soy file by using plovr's test-template option.
I updated the test.soy file so I could use goog.testing.ContinuationTestCase:
<body>
<script src="{$baseJsUrl}"></script>
//This script tag was added.
<script>
goog.require('goog.testing.jsunit');
goog.require('goog.testing.ContinuationTestCase');
</script>
<script src="{$testJsUrl}"></script>
</body>
Now my unit tests using ContinuationTestCase work, but an a different unexpected problem has popped up. My externs are not being loaded! See my plovr configuration below:
{
"id": "peders-app",
"inputs": "src/peder/application.js",
"paths": "src/peder",
"output-file": "compiled.js",
"externs": "src/peder/kinetic-externs.js",
"test-template":"test/org.plovr.test.soy"
}
When I didn't have test-template in my config, my externs loaded fine, but my unit tests using ContinuationTestCase fail.
When I add the test-template option, my unit tests using ContinuationTestCase pass, but many other tests fail since the externs are not loaded.
Below are the error that make me believe the externs aren't working:
12:25:39.398 Start
12:25:39.400 testAddLine : PASSED
12:25:39.402 testCreateUndoCommand : PASSED
12:25:39.403 testUpdateLocalData : PASSED
12:25:39.404 testUpdateServerData : PASSED
12:25:39.404 Done
JS ERROR: Uncaught ReferenceError: Kinetic is not defined
URL: http://localhost:9810/input/peders-app/src/peder/smartPoint.js
Line: 143
JS ERROR: Uncaught TypeError: Cannot read property 'prototype' of undefined
URL: http://localhost:9810/input/peders-app/src/peder/modifyLine.js
Line: 24
JS ERROR: Uncaught ReferenceError: Kinetic is not defined
URL: http://localhost:9810/input/peders-app/src/peder/shapes/line.js
Line: 154
Does anyone know why using a custom test-template would stop my externs from being loaded?
It turns out that the externs were never being loaded when running tests for some reason. The errors from where functions from the externs were being called just weren't causing the tests to fail. I still have no clue why using the test-template option made the errors fail the tests, but luckily I found a workaround.
I simply added my externs directly into the plovr jar. To do this just add your extern into the externs folder inside plovr.jar. Then update externs_manifest.txt at the top level of the plovr jar to include whatever files you added. This will make plovr treat your extern as a default extern.
This probably isn't the "right" way to fix this problem, but it gets the job done.
Related
I would like to put formulas in my webpage, which uses (dotnet Kestrel). I do not want to load javascript libraries from the net, so I am using webpack and npm for my packages.
My problem is, that I find it impossible to load MathJax. I have tried the following:
import 'mathjax-full';
require('mathjax-full'); // << not the error itself
import MathJax from 'mathjax-full';
The most annoying error that I get is this:
ReferenceError: require is not defined
I must do something obviously wrong. The error message comes from the MathJax internals. I have also tried to import requirejs, as some forums mentioned that as some kind of "workaround". The error I get with it is when I run WebPack:
ERROR in ./node_modules/requirejs/bin/r.js 1:0
Module parse failed: Unexpected character '#' (1:0)
Has anybody succeeded with MathJax on WebPack?
I've encountered the same problems as you plus a million more. MathJax is really not WebPack-friendly.
My solution for Angular:
npm install --save mathjax
Extend the "scripts" array of angular.json with:
"node_modules/mathjax/es5/tex-mml-chtml.js"
And now to call MathJax APIs, DO NOT use import of any kind. The mathjax module sets its main to es5/node-main.js, which uses an ugly hack to call require() at runtime, which is the ultimate source of trouble you saw.
Instead, do this:
declare var MathJax;
Now you may complain that this way you have no type information. Well, the fact is that not even mathjax-full has good type information for methods inside this global object: they inject the methods (such as MathJax.typeset()) at runtime and their types are declared using [name: string]: any;.
If your really want type information, you're probably better off declaring it yourself, e.g.:
declare interface MathJaxGlobal {
typeset(elems: HTMLElement[]);
}
declare var MathJax: MathJaxGlobal;
I installed the color-convert library via npm but the browser shows me an error message
Uncaught ReferenceError: require is not defined home.js:134
at HTMLButtonElement.<anonymous> (home.js:134)
at HTMLButtonElement.dispatch (jquery-3.4.0.js:5233)
at HTMLButtonElement.elemData.handle (jquery-3.4.0.js:5040)
JS
var convert = require('color-convert'); // this is line 134
alert(convert.hex.lab('DEADBF'));
I think there is a problem with paths?
require() isn't a function provided by your browser, and is more of a sign that this source code is a common JS module.
In order to use a common JS module, you first need to run your source through a program that bundles the source, sorta replacing each require('other_module') with the source of the other module, producing a single Javascript source file which can included in your frontend HTML.
Two examples of bundlers are browserify and webpack.
I'm attempting to write a cordova plugin that depends on another plugin. My plugin specifies a dependency like so:
<dependency id="fr.pierrickrouxel.cordova.plugin.iCloudKV" url="https://github.com/pierrickrouxel/phonegap-icloudkv-plugin.git" />
Then, in my .js component, I attempt to reference the 'iCloudKV' javascript variable that is exported by the dependent plugin, but I get this error:
ReferenceError: Can't find variable: iCloudKV, http://172.20.1.101:8101/cordova.js, Line: 71
Is there an approved way to reference javascript in dependent plugins? Is the "module.export" from the iCloudKV plugin importable in some way with a require() or something? I've tried the obvious things, but nothing seems to match.
The issue is that I needed to require() the javascript portion of the iCloudCV plugin. The module that is exported by cordova is prefixed by the plugin's id, so the full code to include the "iCloudCV" variable in the "fr.pierrickrouxel.cordova.plugin.iCloudKV" plugin is:
var iCloudKV = require("fr.pierrickrouxel.cordova.plugin.iCloudKV.iCloudKV");
...and then I could reference it properly.
I have been trying to port HTML5 with js code into Meteor. I'm having Javascript dependency problems.
The code can be found at: https://github.com/cwilso/Audio-Input-Effects
I created a new basically empty meteor project (which runs fine) and then added all of the js files from the repo above (which also runs fine on its own).
In order to make sure that the load order was correct, I renamed all the js files using numeric prefixes so that they would definitely be in the same order that they are loaded in the github repo. Looking forward to Meteor coming up with a better solution to this particular issue. I made a local copy of one js file that was otherwise loaded from a url in the repo.
In order to try to initialize the js I also added a file hello.js:
if (Meteor.isClient) {
Meteor.startup(function () {
// code to run on server at startup
initAudio;
});
}
When meteor runs and I look in the console, I get the following errors:
Uncaught TypeError: o3djs.provide is not a function (120_shader.js)
Uncaught ReferenceError: initAudio is not defined (hello.js)
Uncaught ReferenceError: Matrix4x4 is not defined (110_visualizer.js)
Thank you for your help.
I was able to resolve this issue by putting all of the js source files into a single js file in the correct order.
Anybody still wanting information regarding meteor load order, Scotch.io wrote an update to the official docs which clears it up somewhat.
https://github.com/meteor/meteor/commit/a5bdf481dfece9ebc57107d71be478f9b48cbd1e
I have a working web app using require.js and I'm trying to have all files be minified and concatenated. I'm using grunt-contrib-requirejs to compile the whole project into a bundle.js file, like so:
requirejs: {
compile: {
options: {
baseUrl: "public/",
mainConfigFile: "config.js",
name: "start",
out: "public/bundle.js",
preserveLicenseComments: false,
}
}
}
Now I've changed my index.html to call the bundle rather than the unbundled start.js entry point:
replaced: <script data-main="start" src="require.js"></script>
with: <script data-main="../bundle.js" src="require.js"></script>
Compilation seems to be doing fine, and bundle.js is indeed found, but I'm getting this error:
Uncaught SyntaxError: ../bundle.js: In strict mode code, functions can
only be declared at top level or immediately within another function.
But the chrome debugger shows the error as thrown from require.js. I'm pretty sure there is no mistake in require.js. How can I find which part of my code produces the error?
update This may (or may not) be related to this recent jQuery bug. I can't tell because when I use the non-minified version of jquery, I get another error ("define is not defined") coming from this line: define("jquery", function(){});. I don't know where this line comes from either, it seems like a strange thing to do...