react-pdf
react-pdf copied to clipboard
diegomura
Migration guide for 3.0.0
Describe the bug A page or a guide on migration to 3.0.0. We can keep this issue as a guide.
Breaking changes
- Node.js 12 is not supported anymore.
- You can remove jest config
testEnviroment:'jsdom'as it no longer needed.
Desktop (please complete the following information):
- React-pdf version [e.g. v3.0.0]
this.subset.encodeStream is not a function
I got this message after update, What to do to fix this error?
Do you have some external fontkit reference in your package.json? if so try updating it.
We found the reason on local and solved.
We were using "Link" inside "Text" and that was working fine, new version does not accept that. Now "Text" tag is inside "Link" tag and "Text" is the last tag around the text content.
By the way, we are using "@react-pdf/renderer' and @react-pdf/styled-components together.
No other font kit defined in package.json.
Asked about fontkit, because we had same error - but with older version, and initially i thought it was the something related to fontkit we use (some other fontkit ;) ). But now it looks like the issue with conflicting dependencies of @react-pdf/pdfkit (version 2.4.0 depends on react-pdf/fontkit) and @react-pdf/font (2.3.0 depends streamline fontkit). It happened on fresh install of renderer v2.0.21 (ended up on pdfkit 2.4.0 and font 2.3.0) Updating to 3.0.0 fixed the issues (as it uses stramline fontkit across all products). Bit unfortunate to not use major revision for such change :) Other solution is to "pin" react-pdf/font to 2.2.1 if one is using renderer 2.x.
Nice tip for the tags nesting :)
While running my jest tests I'm getting
● Test suite failed to run
ReferenceError: TextEncoder is not defined
1 |
2 |
> 3 | import { Font } from '@react-pdf/renderer';
| ^
4 |
5 |
6 |
at Object.<anonymous> (../../node_modules/.pnpm/[email protected]/node_modules/restructure/dist/src/EncodeStream.js:3:21)
at Object.<anonymous> (../../node_modules/.pnpm/[email protected]/node_modules/fontkit/dist/browser.cjs:1:46)
at Object.<anonymous> (../../node_modules/.pnpm/@[email protected]/node_modules/@react-pdf/font/lib/index.cjs.js:11:15)
at Object.<anonymous> (../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:10:17)
at Object.<anonymous> (src/utils/index.ts:3:1)
at Object.<anonymous> (__test__/jest-setup.ts:2:1)
Update
You can remove jest config testEnviroment:'jsdom' as it no longer needed.
+1 These solutions didn't work for me. This is the actual error:
TypeError: this.subset.encodeStream is not a function
at EmbeddedFont.embed (pdfkit.browser.es.js:36713:1)
at EmbeddedFont.finalize (pdfkit.browser.es.js:36866:1)
at PDFDocument.end (pdfkit.browser.es.js:38689:1)
at render (index.es.js:2109:1)
at _callee$ (react-pdf.browser.es.js:226:1)
at tryCatch (regeneratorRuntime.js:86:1)
at Generator._invoke (regeneratorRuntime.js:66:1)
at Generator.next (regeneratorRuntime.js:117:1)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
```
I can confirm I'm getting this on version 2, in our production environment only (running node16.17). TypeError: this.subset.encodeStream is not a function.
Upgrading to v3 the error did go away.
Just lock the react-pdf/font to version 2.2.1. It should solve it.
Similar issue to https://github.com/diegomura/react-pdf/issues/1991
^This does not work for me. Here are my dependencies:
"dependencies": {
"@react-pdf/font": "^2.2.1",
"@react-pdf/renderer": "^3.0.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.16",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"browserify-zlib": "^0.2.0",
"chart.js": "^3.6.0",
"file-saver": "^2.0.5",
"fontkit": "^2.0.2",
"react": "^17.0.1",
"react-chartjs-2": "^3.3.0",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.4.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-spinners": "^0.11.0",
"sass": "^1.54.0",
"stream-browserify": "^3.0.0",
"typescript": "^4.7.3",
"util": "^0.12.4",
"web-vitals": "^0.2.4"
},
All I did was update @react-pdf/renderer to 3.0.0 and now I have the error:
./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
Would appreciate any help fixing this so I can get back to coding.
Hello, I think if you are using @react-pdf/renderer in version 3, just use react-pdf/font 2.3.0 (or remove the dependency if you are not using it directly). Suggestion to "lock" font package is useful only when you need ot keep renderer on 2.x for any reason.
Update
You can remove jest config testEnviroment:'jsdom' as it no longer needed.
@chathu-novade Can you elaborate on how to do that? I am getting the error ReferenceError: TextDecoder is not defined while running tests in my React project.
Update Now I have my own update. I was able to get past this issue by following another tip I found somewhere. In my setupTests.js I added:
import {TextEncoder, TextDecoder} from 'util'
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
I added a new file custom-test-env.js:
const Environment = require('jest-environment-jsdom');
/**
* A custom environment to set the TextEncoder that is required by TensorFlow.js.
*/
module.exports = class CustomTestEnvironment extends Environment {
async setup() {
await super.setup();
if (typeof this.global.TextEncoder === 'undefined') {
const { TextEncoder } = require('util');
this.global.TextEncoder = TextEncoder;
}
}
}
And then my Test script in package.json got even longer! "test": "react-scripts test --transformIgnorePatterns \\\"node_modules/(?!axios)/\\\"\" --env=./src/utils/custom-test-env.js"
The first chunk of weirdness is due to fighting with how the new Axios version is exporting.
Ugh! This is the crap that makes testing soooo difficult and painful for me!
