I have an issue where a 3rd-party library is using some valid CSS parser features that are not available in JSDOM, and I'd just like to suppress those kinds of errors. But given that I'm using JSDOM through Jest, I'm not quite sure how to do that. I looked at the testEnvironmentOptions in the Jest docs, but I don't know what options to set.
The error message is essentially the following:
Error: Could not parse CSS stylesheet
at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:35:21)
at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
at HTMLStyleElementImpl._childTextContentChangeSteps (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:37:12)
at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:225:14)
at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:202:14)
at HTMLStyleElementImpl.appendChild (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:327:17)
at HTMLToDOM._parseWithParse5 (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:60:21)
at HTMLToDOM._doParse (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:47:42)
at HTMLToDOM.appendToNode (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:37:17)
at setInnerHTML (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:40:25)
at HTMLStyleElementImpl.set innerHTML [as innerHTML] (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:211:5)
at HTMLStyleElement.set [as innerHTML] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:874:29)
at node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1
at Object.<anonymous> (node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1)
It also seems that it's related to the SweetAlert2 library.
Jest Docs for testEnvironmentOptions
JSDOM Issue
Related
I am trying to use jest with the esbuild based project. I tried to use esbuild-jest-transform and esbuild-jest transformers, but in both cases, I got error Cannot use plugins in synchronous API calls from esbuild. This makes sense and I tried to implement AsyncTransformer instead.
But after switching from SyncTransformer to AsyncTransformer, I got the following error:
● Invalid synchronous transformer module:
".../node_modules/esbuild-jest-transform/index.js" specified in the "transform" object of Jest configuration
must export a `process` function.
which implies that it should be implemented in the old way. Here are more details about it.
Could you please tell, me how to make jest to use AsyncTransformer instead of SyncTransformer?
I tried to use import() as is described in the doc, but got the same result.
When I change HTML in template tag in a Vue + Vite project, I'm getting an error:
ReferenceError: can't access lexical declaration 'ComponentName' before
initialization
and
[hmr] Failed to reload /src/views/ComponentName.vue. This could be due
to syntax errors or importing non-existent modules. (see errors above)
This is true only for some components/views and only regards template, the script and style tags don't cause the erorr to happen. I cannot find any regularity in this, like it only affects a random number of components.
I'm using Mocha / Chai to unit test a library that has recently started using nodejs' Buffer objects to solve a different problem.
I get this error message in the unit test:
TypeError: this is not a typed array.
at Function.from (native)
at Object.hashesMatch (index.js:29:18
at Context.<anonymous> (test/test.js:25:22)
Line 29 of index.js is where I'm using nodejs' Buffer...
var b = Buffer.from ('some string or other');
I can't find a polyfill or workaround so would be grateful for suggestions.
Thanks
You might be using an old version of Node.js.
Buffer.from was introduced in version 6.0.0:
To make the creation of Buffer objects more reliable and less error prone, the various forms of the new Buffer() constructor have been deprecated and replaced by separate Buffer.from(), Buffer.alloc(), and Buffer.allocUnsafe() methods.
There's no reference to this method in previous versions of documentiation.
You could either update to 6.0.0 or use a deprecated constructor API, which has the following signature:
new Buffer(str[, encoding])
I also got the same error. You can try this
var b = new Buffer('some string or other');
Second param is encoding (optional). By default encoding will be utf-8
There are times when its difficult to update the node version especially if you are using at production so the another solution is
use "kafka-node": "1.6.2" or lesser
I get the following error when trying to do server-side rendering with components that reference window. For example when I include slick-carousel (https://github.com/kenwheeler/slick) I get the following error:
var Slick = window.Slick || {};
^
ReferenceError: window is not defined
I know its because window is not defined when trying to do SSR, but don't know what the best strategy is to avoid the error.
Basically components should not depend on DOM. Only, some hook methods such as componentDidMount can, where you use .offsetHeight and modify style or whatever. That's why react and react-dom packages are separated.
Instead of passing object by window.XXX, think about using decent dependency solution like require.
I want to use some features for server-side javascript. I think prototype is checking the browser type, but of course node.js is not a browser. I get the following error:
$ node
> require('./prototype') ;
ReferenceError: navigator is not defined
at /home/guest/projects/javascript/prototype.js:14:5
at Object.<anonymous> (/home/guest/projects/javascript/prototype.js:23:4)
at Module._compile (node.js:462:23)
at Module._loadScriptSync (node.js:469:10)
at Module.loadSync (node.js:338:12)
at loadModule (node.js:283:14)
at require (node.js:411:14)
at cwdRequire (repl:29:10)
at [object Context]:1:1
at Interface.<anonymous> (repl:96:19)
prototype.js is version 1.7, node.js is version 0.2.6
Prototype is written to be modular. This means you can use just the useful parts that extend Array and Class and Function (I love those bits!) and leave out the parts that deal with browser and DOM (the bits that are slow in IE and non-existent in node).
Start by going to https://github.com/sstephenson/prototype then pick out the desired parts from src/prototype/ and src/prototype/lang/.
I wish you luck on such a fascinating challenge.
Late answer, but I'm sure it can still be useful to some people:
https://github.com/Rixius/prototype.node.js
Few days ago, I did something like that myself, and realized it had already been done...
This repo is hard to find even with the github search.
If you have a look at the source of Prototype.js, it is tightly bound to the browser environment, which isn't provided by node (since it's not a web browser).
jsdom attempts to mock the browser environment, and has been used to successfully run JQuery on the server side. Your mileage may vary.
There is underscore.js especially for node.js, which implements most of Prototypes beloved functions:
Underscore is a utility-belt library for JavaScript that provides a lot of
the functional programming support that you would expect in Prototype.js.
Its faster as Prototype itself, because it does not extend any of the built-in JavaScript objects.
Due to this, the syntax is slightly different:
// prototype.js:
anArray.each(function(){ ... });
// underscore.js:
_ = require('underscore');
_.each(anArray, function(){ ... });
If your are looking for Prototypes String functions like trim, have a look at underscore.string