Migration guide for 3.0.0

ghost commented 2 years ago

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]

ticpoi commented 2 years ago

this.subset.encodeStream is not a function

I got this message after update, What to do to fix this error?

jasiekkrk commented 2 years ago

Do you have some external fontkit reference in your package.json? if so try updating it.

ticpoi commented 2 years ago

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.

jasiekkrk commented 2 years ago

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 :)

ghost commented 2 years ago

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/restructure@3.0.0/node_modules/restructure/dist/src/EncodeStream.js:3:21)
      at Object.<anonymous> (../../node_modules/.pnpm/fontkit@2.0.2/node_modules/fontkit/dist/browser.cjs:1:46)
      at Object.<anonymous> (../../node_modules/.pnpm/@react-pdf+font@2.3.0/node_modules/@react-pdf/font/lib/index.cjs.js:11:15)
      at Object.<anonymous> (../../node_modules/.pnpm/@react-pdf+renderer@3.0.0_react@17.0.2/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.

richardsondx commented 2 years ago

+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)

ghost commented 2 years ago

@richardsondx What the font you are using and how do you load it?

jasiekkrk commented 2 years ago

Is it happening on v2 or v3?

GavinThomas1192 commented 2 years ago

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.

jasiekkrk commented 2 years ago

Just lock the react-pdf/font to version 2.2.1. It should solve it.

richardsondx commented 2 years ago

Locking the react-pdf/font version to 2.2.1 worked! Thanks

marsmallos commented 2 years ago

^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.

ghost commented 2 years ago

@marsmallos Any specific reason to install "@react-pdf/font" dependency?

jasiekkrk commented 2 years ago

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.

mdodge-ecgrow commented 1 year ago

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!

diegomura / react-pdf