I am using pagedjs to create PDFs, which uses puppeteer.
I try to load a page and I am getting the following exception:
Error: Evaluation failed: ProgressEvent
at ExecutionContext._ExecutionContext_evaluate (file:///.../main/print-microservice/node_modules/puppeteer/lib/esm/puppeteer/common/ExecutionContext.js:282:15)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async ExecutionContext.evaluate (file:///.../main/print-microservice/node_modules/puppeteer/lib/esm/puppeteer/common/ExecutionContext.js:114:16)
at async Printer.render (file:///.../main/print-microservice/node_modules/pagedjs-cli/src/printer.js:182:4)
at async Printer.pdf (file:///.../main/print-microservice/node_modules/pagedjs-cli/src/printer.js:250:14)
at async file:///.../main/print-microservice/node_modules/pagedjs-cli/src/cli.js:159:11
I narrowed it down to the following line, I have in my page:
<link rel="stylesheet" type="text/css" href="https://www.example.com/custom-theme.css">
As soon as I remove the stylesheet, or even inline the CSS, the page gets rendered fine.
I also get the exception if the CSS file is empty.
Is there a resolution to this problem?
Thanks in advance
Related
I'm having an issue with embedding Bokeh inline. Particularly, there is an issue with loading the resources from the 'link' tag (refer to html snippet below). For some reason, when I try try to embed a Bokeh plot inline, the following error occurs: 'Failed to load resource: the server responded with a status of 404 (Not Found)', referencing this link - https://cdn.bokeh.org/bokeh/release/bokeh.min.css.map
However, the above address is different from the one I indicate in the link tag (it omits the bokeh version at the end). I have no idea why this error occurs, it's the first time that this happens. I have previously used inline embedding successfully on a number of occasions.
<head>
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.js>
</script>
</head>
EDIT
I am trying to use inline embedding together with jQuery (I would like to display different Bokeh plots without reloading the entire page every time).
When I looked for further error details in the console, I found the following error: "Error rendering Bokeh model: could not find tag with id..."
If it's of any relevance, here is the jQuery script in my html:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
proglang: $('input[name="proglang"]').val(),
}, function(data) {
$("#result").html(data.a);
$("#r").html(data.b);
});
return false;
});
});
</script>
Where 'data.a' and 'data.b' are the Bokeh-generated script and div tags, respectively.
Any suggestions or advice would be much appreciated!
Best guess is that the script is executing first/early, before the <div> is inserted into the DOM. You will need to find a way to guarantee that the <div> is available by the time the the script executes.
As an aside the partial load use case was not really envisioned when the componenent function was created. If you want to do partial loads, it might be better to serve the doc JSON and then calling Bokeh.embed.embed_items directly on from JavaScript somehow. But it would probably take some experimentation and discussion and back and forth to get that working, which SO is not very good for. I'd encourage you you bring this topic to the public Discourse for further discussion.
I am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522
I'm trying to prepare a default error page. In error.html file I use:
<link href="css/bootstrap.min.css" rel="stylesheet">
In tornado Application I use following routing instruction:
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
Let's say I type http://localhost:8888/api url. Everything is fine and css file is loading correctly and error page is rendered fine. However when I type http://localhost:8888/api/foo the css file is not found.
In the first situation the css request http://localhost:8888/css/bootstrap.min.css is handled correctly by the handler. In the second approach the request for css is translated to http://localhost:8888/api/css/bootstrap.min.css which is not handled.
I want the resources to be found in both situations to correctly display error page. I can use:
(r'.*/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
However this time I can type into browser http://localhost:8888/api/asdasdsadsad/css/bootstrap.min.css url and the css file is dispayed while I think there should displayed error page. How may I get rid of this problem?
It is because you use relative paths. There are two common ways to fix this:
use absolute urls. Add / (slash) before any resource, so instead of <link href="css/bootstrap.min.css" rel="stylesheet"> use <link href="/css/bootstrap.min.css" rel="stylesheet">
add <base> to page in <head> section
Base ... specifies the base URL to use for all relative URLs contained within a document.
<base href="http://www.example.com/">
And leave the handler as
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'})
the latter is working because it's regex is very broad, as you notice it handles request that should be 404. The good practice is to have routes as specific as possible.
I am simply trying to further compress a css file. And I am getting an error which is peculiar. I wondered why I would get a ReferenceError: Can't find variable: jQuery for just a task which solely encompasses selectors from HTML & CSS? Unless it's reading the script tags in my HTML which have selectors?
UPDATE I forgot to mention the task is not spitting out, a new CSS file!
Also I noticed many gulp tasks have ./ preceding the directory, What is the purpose of that?
Anyway, see below:
This is my Gulp file, figured I include it...
gulp.task('uncss', function() {
return gulp.src('site/assets/stylesheets/style.min.81113a5b.css')
.pipe(uncss({
html: [
'site/**/*.html'
]
}))
.pipe(gulp.dest('./out'));
});
This is the error I am getting.
ReferenceError: Can't find variable: jQuery
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:12
file:///Users/antonioortiz/Sites/antonioortiz.github.io/site/cookie_control/cookie_example/index.html:43
/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:43
fn = function () { throw arg; };
^
Error: uncss/node_modules/css: unable to parse undefined:
missing '}' near line 1:46497
1: -> ebkit-min-device-pixel-ratio:0){#media{.
at error (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:57:15)
at declarations (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:224:26)
at rule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:481:21)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:56)
at atmedia (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:345:35)
at atrule (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:457:10)
at rules (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:103:44)
at stylesheet (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:73:16)
at Object.module.exports [as parse] (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/css/node_modules/css-parse/index.js:485:10)
at process (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/src/uncss.js:158:22)
at tryCatcher (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/util.js:26:23)
at Promise._settlePromiseFromHandler (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:501:31)
at Promise._settlePromiseAt (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:577:18)
at Promise._settlePromises (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/promise.js:693:14)
at Async._drainQueue (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:123:16)
at Async._drainQueues (/Users/antonioortiz/Sites/antonioortiz.github.io/node_modules/gulp-uncss/node_modules/uncss/node_modules/bluebird/js/main/async.js:133:10)
Taken from the UnCSS documentation:
How?
The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
...
This means that your page will be loaded in a headless browser, so that library is able to find which selectors are really used.
I never used UnCSS, but what it seems to me is that:
it will throw JS errors in case they happen;
it will complain in case your CSS is not error-free.
That's why you're getting those errors.
Sounds similar to Issue 157. The solution - try using paths like /site/**/*.html instead of site/**/*.html.
Next thing to try is setting a higher value for the timeout option to give jQuery more time to load.
I am writing (or attempting to write) my first Chrome extension, and I cannot figure out this error I keep getting. My background code is
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log('works?');
chrome.tabs.executeScript(null, {code:"document.body.style.fontSize = 20"});
console.log('print again');
</script>
</body>
When I try to run this extension I get the error:
Error during tabs.executeScript: Unknown error. extensions/extension process bindings.js:85
Does anyone have any idea what this could possibly be or how to fix it? I get no error when I do not include the line chrome.tabs.executeScript, and I get the error no matter what I write for the parameters of chrome.tabs.executeScript.
I also get the error when I include chrome.tabs.executeScript inside a function that is called whenever the browserAction is clicked
Any help would be much appreciated, thank you!
You are injecting code into selected tab right when background page loads for the first time, which happens on chrome://extensions page where you cannot inject anything.
Not sure why you are still getting error inside browser action listener, maybe you have extensions page still opened?