Im using testcafe for testing our page for now bout 1 year.
On the latest version of our page, the devs used preloading and critical CSS for performance optimizations.
Since then i get an error on page startup:
ReferenceError: Cannot access 'ModuleName' before initialization
Is there a problem with TestCafe if a a page uses rel="modulepreload" to import js?
The DOM shows, that this module is part of a js-file that is preloaded like this.
<link href="//cdn.test.local/version1/dist/script/something.static.js" rel="modulepreload">
-> link wont work since the page is on a local site.
Content of js-file:
import{ModuleName}from'./classes/something.class.ajax.js';export const someAjaxPlugin=new ModuleName;
This Error does only occur if i run the page in testcafe... is that a bug?
Any one an idea what i can do so my tests will run again?
Related
I'm trying to use formio and a 3-rd party framework formio-export but I'm having trouble getting started.
The author provided a sample of the framework on his github page. Demo can be found here.
I've tried to recreate a simple demo using HTML/JS.
I was able to create the form, load a submission on demand, but I'm unable to get the print functionality working. When I press the print button, I get the error:
Uncaught ReferenceError: FormioExport is not defined
at HTMLButtonElement. (:47:21)
at HTMLButtonElement.dispatch (index.js:3)
at HTMLButtonElement.elemData.handle (index.js:3)
A fiddle for your convenience.
I would expect the formio-export to 'just work' once the script tag is added but maybe it requires some additonal configs?
You can't use it in the browser directly. You must use node in order to import the module
import FormioExport from 'formio-export';
and then use
npm run build
to make a browser bundle (as explained in the github page).
Our angular app sometime does not load on chrome canary (Version 41.0.2237.0 canary (64-bit)) saying
Failed to instantiate module ngHintModules due to: RangeError: Maximum
call stack size exceeded
But it loads fine in firefox, chrome (Version 39.0.2171.71 (64-bit)), safari.
Probably not sure whether there is something to do with angular or not.
Full error
Uncaught Error: [$injector:modulerr] Failed to instantiate module ngHintModules due to:
RangeError: Maximum call stack size exceeded
at Array.forEach (native)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2333:21)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2384:5)
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2387:7
at Array.forEach (native)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2385:21)
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2387:7
at Array.forEach (native)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2385:21)
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2387:7
NB: The Error I am showing here is from
Version 41.0.2237.0 canary (64-bit)
I also had this problem which was resolved by disabling Batarang.
This issue is opened on the Batarang Github here: https://github.com/angular/angularjs-batarang/issues/156
You can load the prior version of Batarang from this zip file: https://github.com/angular/angularjs-batarang/archive/v0.4.3.zip
Open More Tools->Extensions in Chrome
Locate AngularJS Batarang and click on the trash can to remove the extension
Download the .zip
Extract the file
Open More Tools->Extensions in Chrome
Check Developer Mode at the top
Click 'Load unpacked extension'
Select the directory where you extracted the zip
If you get an error about the manifest file, then you probably selected one directory level too high. Make sure that you select the bottom level angularjs-batarang-0.4.3 directory
Load up an AngularJS page and use Batarang again with Inspector just like before
This will restore the previous version which while having issues does have some mostly working features like Performance profiling, scope inspector, options, and a help tab which are gone from the latest version. The 0.7.1 version fixes the major breakage of apps, but it only provides the scope tree (no inspector) and the new angular-hint functionality.
You don't need to disable Angular batarang; just do the following:
Open the developer tools and navigate to the hint.js file (the one that is triggering the stack overflow)
Go to line 453 add add a breakpoint
reload the app, and when it hits the breakpoint just comment it out (setupModuleLoader(window)) and click continue
It will still throw an exception, (Uncaught ReferenceError: angular is not defined) but you will be able to run batarang
I know it's not the best solution, but that's the quickest thing I could find without going too deep into the problem
Update:
Checking more to what is happening I noticed that the problem happens when we have define multiple modules and we are adding the same dependencies for all of them.
for example:
angular.module("app", ["moduleB", "moduleC"]);
angular.module("moduleB", ["moduleC"]);
When I define the moduleB without passing the same deps with it's parent module, then there is no stack overflow.
angular.module("moduleB", []);
Our team just experienced this error and it was fixed by updating the Batarang Extension in Chrome to the latest.
Update...
With the new update of Chrome, the problem is back, so if anyone experienced this error, revert back to previous build of Chrome.
All builds available here, don't pick the first one.
http://www.slimjet.com/chrome/google-chrome-old-version.php
Then it should work fine!
I had the same problem with GitHub pages site (with Jekyll).
Searched for hours why does AngularJS app didn't show up (ng-cloak was never resolved).
Figured out that was Batarang which causing the issue.
Great thanks for #kpg's answer.
I have a SPA (built on webpack, with babel, etc) that includes a polyfill in the index.html:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Array.prototype.includes,Element.prototype.remove"></script>
One use-case for the polyfill is in order to use the Promise API on IE 10-11.
My error monitoring reporting an error on an IE 11 client of the following:
ReferenceError: 'Promise' is undefined
So I assume that particular session failed to download the polyfill for some reason.
My question is: How should I deal with this case? Is it a scenario I should expect to happen sometimes? Is the user expected to noticed the application not working properly, and reload the page?
There is an error event you can attach to allow for more control if you are really worried. You don't usually need to handle this explicitly though.
In this particular case you could migrate towards using babel to build a bundle with polyfills included in your scripts. This adds an additional build step to your process though.
Since you mentioned you're using webpack, it would just be best to include the necessary polyfills directly in the project via an import statement (something like core.js) rather than using a cdn - polyfill.io.
However, you could alternatively add an ID to the script element and listen to the onload and onerror events to determine whether the script (un)successfully loaded like so:
<script id="polyfillScript" src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Array.prototype.includes,Element.prototype.remove"></script>
In your project index.js:
document.getElementById('polyfillScript').addEventListener('error', () => {
alert('Failed to load polyfill!');
});
I need to expose better error detail from requireJS "load timeout for modules" errors so I can actually debug to find out what is causing the load timeout.
I'm unable to get the error to appear on my development machine, but roughly 10% of our daily visitors are experiencing this error in the production environment (track.js is being used to gather these errors for visibility).
The error is being thrown for my main.js file ("load timeout for modules: main") - the application entry point. I've added the errback callback to try to log the error detail here but this error doesn't seem to hit this callback so it seems as though everything main.js is requiring is fine.
I've added a global override for requirejs.onError and all I get here is the module name (main.js) and an error code of timeout.
I've used madge and have verified that there are no circular dependencies.
I have optimized the build using r.js optimizer.
I have set waitSeconds: 0 in require config (by my understanding should disable the timeout completely)
How can I find out what module that is being required somewhere down the line is actually causing the timeout? Anything further to go on would be very helpful - I'm finding this incredibly hard to track down. Thanks.
you can set waitSeconds in config of requireJS. By default it's 7 seconds. I do not know the exact answer to your question but this can be a temporary solution. Probably someone from users has a very slow internet. and it is not enough 7 seconds.
You can test in in Chrome devTools -> Network tab -> Throtling selector. And select for example "2G regular 450 kb/c". I assume that you will see this error. Also, this error sometimes occurred when I used CDN.
from James Burke himself. .....However if the difficulty is that your "main" is taking a long time to load, that script holds the requirejs.config() call with waitSeconds, and it was loaded via data-main, then the requirejs.config() call may not be called in time for it to be useful. For that issue, you can pass waitSeconds using "requirejs as initial config".
<script>var requirejs = { waitSeconds: 0 };</script>
<script src="require.js" data-main="main"></script>
This worked perfectly.
I am using the mvc-mini-profiler to profile my MVC site. It runs fine on my local machine, but when i publish to my hosting server, the profiler doesn't load, and i get the following error:
yepnope is not defined
yepnope([
As far as I can tell, the problem lies in the profiler trying to use yepnope before yepnope has been loaded. Is there a way around this, maybe by forcing a check to see if yepnope has been loaded before executing the miniprofile render command? Here are the relevant lines from the page's generated source
<script type="text/javascript" src="/mini-profiler-yepnope.1.0.1.js"></script>
<script type="text/javascript">
yepnope([
{ test: window.jQuery, nope: '/mini-profiler-jquery.1.6.1.js' },
And for completeness, the calls in my _layout file
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
#MiniProfiler.RenderIncludes(position: RenderPosition.Left, showTrivial: false, showTimeWithChildren: false)
Check if you are getting a 404 error when trying to load yepnope.js. There was a bug in MvcProfiler in dealing with application path, which has been addressed
in later builds.
MVC Mini Profiler includes not respecting application's path
Make sure that you aren't clearing your routes when registering them for your site. The mini profiler adds its own routes for those javascript files to the RouteCollection potentially before your site is initialized.
In case anyone else has this problem, it has been submitted to their google code project. It is a known issue, and they are working on it.
Issue Page if you want to track it