Comments (24)
For anyone hitting this same issue, I was able to fix this on a project (which had a failing test due to this error) by including the following in my jest.setup.js
file:
import { TextDecoder, TextEncoder } from 'util'
global.TextEncoder = TextEncoder
global.TextDecoder = TextDecoder
from isomorphic-dompurify.
I've tried each one of the solutions provided above but since i'm working with nextJest the tests were failing.
I solved it by adding
setupFiles: ["path/to/personalizedJest.setup.js"],
to the personalized configuration for jest, in this file i just imported TextEncoder and TextDecoder from util:
import { TextDecoder, TextEncoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
from isomorphic-dompurify.
I've tried
import { TextDecoder, TextEncoder } from 'util'
global.TextEncoder = TextEncoder
global.TextDecoder = TextDecoder
in my jest setup
but I just get this error:
TypeError: TextEncoder is not a constructor
> 5 | import DOMPurify from 'isomorphic-dompurify';
any ideas?
edit:
for anybody having this issue, I fixed it by importing from 'node:util'
so:
import { TextDecoder, TextEncoder } from 'node:util'
from isomorphic-dompurify.
For me, I had to add the following to jest.setup.js
import { TextDecoder, TextEncoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
and import the lib like import * as dompurify from 'isomorphic-dompurify';
from isomorphic-dompurify.
For me, the TextDecoder had a type mismatch issue with the above approach, so I solved it with this syntax instead:
import { TextEncoder, TextDecoder } from 'util';
Object.assign(global, { TextDecoder, TextEncoder });
Thanks to leonheess - https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest
from isomorphic-dompurify.
Hi @danpottshimself ,
Thanks for reporting the issue.
First of all, let's make sure that you don't have any dependency conflicts by removing node_modules
folder and then installing all dependencies again the following way:
npm install
# or
yarn
from isomorphic-dompurify.
By the way, I reformatted the issue description a little bit.
from isomorphic-dompurify.
I've just added an additional automated test to cover your particular case and it passed.
from isomorphic-dompurify.
@kkomelin odd, I guess this could be some form of clash between dependencies I have installed elsewhere. I have tried multiple node module cleans/rm's and re-installs to no avail. I guess the issue is my side so you can close this issue, thanks for the support
from isomorphic-dompurify.
I'm also getting this fwiw, so it is slightly broader. Not entirely sure what the conflict is, perhaps one of the dependencies here isn't tightly bound enough so something else is pinning it to an older version?
from isomorphic-dompurify.
That makes me feel less crazy @cnorthwood. I was originally thinking it could be jsdom environment potentially since in version 16, it looks like jest etc have been bumped?
from isomorphic-dompurify.
ah yes - that would explain it, and why @kkomelin's automated test passed. Jest with JSDom polyfills that call by itself, so it'll work in a Jest environment because JSDom has polyfilled that function, but won't when not running under Jest.
from isomorphic-dompurify.
Thanks guys. I will try to reproduce the issue without Jest. Will keep you updated.
from isomorphic-dompurify.
Just tested through a console Node.js script (Node 14.16):
require('isomorphic-dompurify');
DOMPurify.setConfig({ALLOWED_TAGS: ['b']});
console.log(DOMPurify.sanitize('<b>dddd</b><iframe>Iframe!</iframe>'));
And it worked fine.
Could you please give me more details on what are your environments so I could try to reproduce the issue locally? Server/client? Next.js/React/others?
from isomorphic-dompurify.
By the way, do you use Yarn or NPM for dependency management?
from isomorphic-dompurify.
I use Yarn - I've rolled back for now but will try and reproduce.
This is server-side Node 14 (Apollo Server) with TypeScript. I dont' use DOMPurify as a global like that, this is how I use it:
import { addHook, sanitize as _sanitize } from "isomorphic-dompurify";
// only let target="_blank" exist on A tags and enforce rel="noopener"
addHook("afterSanitizeAttributes", (node) => {
if ("target" in node) {
if (node.tagName === "A" && node.getAttribute("target") === "_blank") {
node.setAttribute("rel", "noopener");
} else {
node.removeAttribute("target");
}
}
});
export const sanitize = (body: string) => _sanitize(body, { ADD_TAGS: ["iframe"], ADD_ATTR: ["target"] });
from isomorphic-dompurify.
Thanks @cnorthwood Will try to play with your example.
Although I don't think it helps but I've just updated jsdom
to the latest minor e466c36 . If you want to test the updated dev snapshot, just install it like this yarn add kkomelin/isomorphic-dompurify#master
from isomorphic-dompurify.
sadly not. For more info, here's the full stack trace I get:
FAIL api/resolvers/Mutation/createArticle.test.ts
● Test suite failed to run
ReferenceError: TextEncoder is not defined
1 | import { ForbiddenError } from "apollo-server-errors";
> 2 | import { addHook, sanitize as _sanitize } from "isomorphic-dompurify";
| ^
3 | import { Model } from "sequelize/types";
4 |
5 | import User from "../../db/models/User";
at Object.<anonymous> (node_modules/whatwg-url/lib/encoding.js:2:21)
at Object.<anonymous> (node_modules/whatwg-url/lib/url-state-machine.js:5:34)
at Object.<anonymous> (node_modules/whatwg-url/lib/URL-impl.js:2:13)
at Object.<anonymous> (node_modules/whatwg-url/lib/URL.js:442:14)
at Object.<anonymous> (node_modules/whatwg-url/webidl2js-wrapper.js:3:13)
at Object.<anonymous> (node_modules/whatwg-url/index.js:3:34)
at Object.<anonymous> (node_modules/jsdom/lib/api.js:7:19)
at node_modules/isomorphic-dompurify/index.js:1:278
at Object.<anonymous> (node_modules/isomorphic-dompurify/index.js:1:344)
at Object.<anonymous> (api/validators/index.ts:2:1)
at Object.<anonymous> (db/models/Question.ts:4:1)
at Object.<anonymous> (db/models/Answer.ts:13:1)
at Object.<anonymous> (db/createTestAccounts.ts:3:1)
at Object.<anonymous> (api/resolvers/Mutation/createArticle.test.ts:3:1)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:401:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)
from isomorphic-dompurify.
so the issue appears to be in whatwg-url
$ yarn why whatwg-url
yarn why v1.22.13
[1/4] 🤔 Why do we have the module "whatwg-url"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "whatwg-url"
info Reasons this module exists
- Hoisted from "isomorphic-dompurify#jsdom#whatwg-url"
- Hoisted from "isomorphic-dompurify#jsdom#data-urls#whatwg-url"
info Disk size without dependencies: "140KB"
info Disk size with unique dependencies: "412KB"
info Disk size with transitive dependencies: "460KB"
info Number of shared dependencies: 3
=> Found "node-fetch#[email protected]"
info This module exists because "node-fetch" depends on it.
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "348KB"
info Disk size with transitive dependencies: "396KB"
info Number of shared dependencies: 3
=> Found "jest-environment-jsdom#[email protected]"
info Reasons this module exists
- "jest-cli#jest-config#jest-environment-jsdom#jsdom" depends on it
- Hoisted from "jest-cli#jest-config#jest-environment-jsdom#jsdom#whatwg-url"
- Hoisted from "jest-cli#jest-config#jest-environment-jsdom#jsdom#data-urls#whatwg-url"
info Disk size without dependencies: "136KB"
info Disk size with unique dependencies: "5.28MB"
info Disk size with transitive dependencies: "5.32MB"
info Number of shared dependencies: 4
from isomorphic-dompurify.
Just for reference jsdom/whatwg-url#209
from isomorphic-dompurify.
Ah, so it's a version mismatch with Jest and that breaking it: https://stackoverflow.com/questions/57712235/referenceerror-textencoder-is-not-defined-when-running-react-scripts-test
from isomorphic-dompurify.
Good catch @cnorthwood ! Now when we know the cause, what solution would you recommend?
from isomorphic-dompurify.
Jsdom is a complex project which has already caused some dependency pain #54
from isomorphic-dompurify.
I installed and I'm facing a similar issue. Everything seems fine.
The test suite failed to run
ReferenceError: TextEncoder is not defined
I tried to print the process version using console.log(process.version)
and it's 14.7.0
, still giving an error.
What is the right solution?
Node version: 14.7.0
from isomorphic-dompurify.
Related Issues (20)
- Merge isomorphic-dompurify additions with dompurify? HOT 2
- Add information about the minimum node version HOT 2
- Request body is being removed HOT 3
- High CPU Utilisation by the library HOT 2
- _isomorphicDompurify.default.sanitize is not a function error in jest environment HOT 1
- ESM Support HOT 4
- target blank get added to every url HOT 1
- Build error when using isomorphic-dompurify in angular 15 universal HOT 8
- Requirements for Node.js 14 HOT 1
- Isomorphic Dompurify Remix support ? HOT 2
- Next.js build error: Window is not defined HOT 33
- String is being sanitized HOT 6
- Request for SemVer Adherence in Future Releases HOT 1
- Web Worker Support HOT 3
- usage import issue with vite named export 'sanitize' not found HOT 4
- Cannot find package on server with Nuxt HOT 8
- Sanitize returns empty string when `PARSER_MEDIA_TYPE: application/xhtml+xml` and void tags HOT 7
- Can't resolve 'canvas' on next.js serverless app HOT 41
- dompurify.sanitize clears everything except for whats inside of <body> HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from isomorphic-dompurify.