The new Chrome 64 security update seems to have broken the htmlToImage libraries. None of the styling is correctly calculated and is rendered as if no styling was applied at all.
Does anyone know of a workaround / fix? Do I need to put my CSS on the server and allow CORS?
I just fixed this error.
Forked the lib and made a pull request. Until it gets merged, you can use the forked repo: https://github.com/kmap-io/html-to-image
by replacing the target of html-to-image in your package.json with:
"html-to-image": "git+https://github.com/kmap-io/html-to-image.git"
About the bug
Chrome is complaining (throws an error) about trying to read a property that does not exist. Firefox also complains, but they only throw a warning, instead of an error. The fix consists of replacing
if (sheet.cssRules) {
...
with
if (sheet.hasOwnProperty('cssRules')) {
...
There is no downside (i.e.: when cssRules exists on sheet - which is a stylesheet - the script iterates through the rules and adds them to document, as supposed to).
How to patch (until it gets merged).
For some reason, simply replacing the library's repo with the fork in which I committed the change doesn't work for this package. I asked the lib's author to add instructions on how to build after a pull-request, as they state in the readme pull requests and contributions are welcome. Until then, here's how to apply the fix using patch-package:
add "prepare": "patch-package" inside scripts, in your project's package.json
npm i patch-package --save-dev
In node_modules/html-to-image/lib/embedWebFonts.js, change line 7 from
try {
to
if (sheet.hasOwnProperty('cssRules')) try {
npx patch-package html-to-image
If you have a deployment script that builds your project from scratch, you'll need to apply the patches right before you call npm run build (or similar, depending on your stack):
git apply --ignore-whitespace patches/*.patch
That's about it.
When the fix will be merged, you'll need to run:
npx patch-package html-to-image --reverse
Related
I am using Microsoft's VS Code to edit css, html and ts files that are shared by my team on a VSTS Git repo. However, my VS Code keeps removing empty/whitespaces that my colleagues added when I save any change (Image below) and this screws up the whole Git Diff part, as almost every single line of code shows as a diff.
I tried to disable every single config setup but nothings works:
At the end, what was causing my problem was the extension: EditorConfig for VS Code
This plugin attempts to override user/workspace settings with settings
found in .editorconfig files. No additional or vscode-specific files
are required. As with any EditorConfig plugin, if root=true is not
specified, EditorConfig will continue to look for an .editorconfig
file outside of the project.
I believe, it was overriding the options I selected inside of VS Code (such as files.trimTrailingWhitespace: false). So, no setup change I was making was actually being applied.
It seems you have trailing whitespace enabled in User Preferences too.
I'd suggest opening your configuration file of VSCode using
CtrlShiftP or
CmdShiftP in Mac and then go to Open User Settings.
I'm sure the next line is around there somewhere, delete it or change it to false.
files.trimTrailingWhitespace": true
In my case, the JS-CSS-HTML Formatter extension from lonefy
caused the problem.
Editor › Comments: Ignore Empty Lines
——>choose ：false
Hello developers out here!
I struggle with stencil bundle and stencil push issues.
I get error at "Validating theme..."
Error: Your theme's schema.json has errors:
schema[1].settings[28].options[0].value should be string,number
schema[1].settings[28].options[1].value should be string,number
...
It seems that I get this issue after try to test latest cornerstone (5.4.5) theme version, and update stencil-cli and now I can't use oldest version (1.10.0) schema.json file -> https://github.com/bigcommerce/cornerstone/blob/1.10.0/schema.json
Now it only works with these two files:
schema.json -> https://github.com/bigcommerce/cornerstone/blob/4.5.4/schema.json
schemaTranslations.json -> https://github.com/bigcommerce/cornerstone/blob/4.5.4/schemaTranslations.json
But I am not sure how it would impact live site work if I use different schema files.
It is possible to work again with old schema.json file?
Previously all worked...
I tried to:
delete all node_modules
reinstall #bigcommerce/stencil-cli
and node modules (npm install)
These look similar to errors when the schema.json or schemaTranslations.json file have been removed or modified, could you add any relevant schema code in your post? Since Stencil CLI 2.0, part of the bundle process now validates a schemaTranlsations.json file which has been included since Cornerstone 4.5.4. This change can be found on the GitHub repo here as well as on our DevCenter Changelog.
Hello #dakterits and #kyle-obrien
The error which you mentioned means that option number 0 and 1 in setting number 28 in the schema file has either empty value or different value. So, to fix this issue, you don't have downgrade the node or reinstall stencil or delete any file.
The Solution:
Download the original copy of the theme.
Edit the original theme schema file.
If you have any file compare software then compare edited theme schema with original theme schema.
Once you compare, you will definitely see any change in value in defined settings.
Migrated existing webpack project to use webpack 3.5.5 and its new config. Using express server instead of webpack-dev-server.
I had to setup the resolve in webpack as below.
const resolve = {
extensions : ['.js'],
modules : [
'node_modules',
'src',
'testApplication'
]
};
When i debug this webpack application using chrome developer tools I can see the 2 versions of source files.
The first one under webpack://
It is exactly matching with the source
The second one under webpack-internal://
This one is the babel compiled version of the source.
My questions are
Is there someway where I get only a first version of the file instead of both?
I thought node_modules should have been implicitly defined as a module rather than me specifying it explicitly in resolve, is there someway that I can make the build work without having the node_modules defined in resolve.
After using the same source code with webpack 3.5.5(migrated it from webpack 1.14.0) the express server start seems to have slowed node. My guess is that having specified the node_modules in modules under resolve has caused it. Any ideas?
You can configure the source maps using Webpack's devtool property. What you want is devtool: 'source-map'(source). This will only show you the original source code under webpack://. Note that there are other options that might be more appropriate for your use case.
["node_modules"] is in the default value for resolve.modules. However, if you specify resolve.modules you need to include "node_modules" in the array. (source).
It seems strange that you specify "src" and "testApplication" in resolve.modules. If you have local source files you should require them using relative paths e.g. require("./local_module"). This should work without having src in resolve.modules
Specifying node_modules in resolve.modules is not responsible for any slow down (see 2.). There are many possible reasons the slow down. E.g. maybe you are erroneously applying babel to the whole node_modules folder?
It seems to be resolved (or at least greatly improved) in Chrome 66.
Hello this questions is having a minimal working example of what Im trying to build.
Im having troubles to run flow-type checker on just simple JS file. Here is how the file looks like
// #flow
import type { Map } from 'immutable';
And I even build a minimal working (NOT working) example with travis running it.
Here is the repository. It's very simple and only has flow and immutable-js dependencies.
https://github.com/RusAlex/immutable-flow
and here is the failed Travis-ci build
https://travis-ci.org/RusAlex/immutable-flow/builds/243260858
Flow reads the package.json to find out about imports, but since you moved your .flowconfig inside your src/ folder, it no longer can. If you include the package.json by adding ../package.json to your [include] you get an interesting error:
src/flow.js:2
2: import { Map } from 'immutable';
^^^^^^^^^^^ This modules resolves to "<<PROJECT_ROOT>>/../node_modules/immutable/package.json", which is outside both your root directory and all of the entries in the [include] section of your .flowconfig. You should either add this directory to the [include] section of your .flowconfig, move your .flowconfig file higher in the project directory tree, or move this package under your Flow root directory.
Finally, adding ../node_modules/immutable/ will help flow resolve everything again.
Alternatively, you could just add .flowconfig to the actual project root. It makes things simpler and seems to be the intended default.
Starting my Mean.js application using gulp prod is overwriting my changes to production.js. I edit the file, save it, commit it, whatever, and when I run gulp prod it immediately reverts to the state it was before I edited, linting errors and all. This is config/assets/production.js, which as far as I know is a source file, not something I'd expect to be generated.
I've searched the docs and the code to try to figure out what's happening, but I'm not getting it. Any hints?
This had been due to the 'wiredep' task overwriting the assets based on bower.json.