Migration to @react-pdf/renderer v3.0.0 causes build and runtime failures

[SashaShostyr]

Describe the bug

After updating to @react-pdf/renderer v3.0.0 build job and runtime is failing with error:

To Reproduce

Steps to reproduce the behavior including code snippet (if applies):

1. Clone this repository https://github.com/SashaShostyr/react-pdf-renderer-issue
2. Go to first commit and run app - PDF is rendered correctly
3. Go to second commit and run app - PDF is not rendered and throw an error (see screenshots)

Expected behavior

No errors after update.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• React-pdf version v3.0.0
• Node version: v16.16.0

[carlobeltrame]

Others have reported the same issues when upgrading. Can you try uninstalling and re-installing @react-pdf/renderer? The dependency @react-pdf/font must be at least at version 2.3.0 in your lockfile for @react-pdf/renderer v3.0.0 to work.

[SashaShostyr]

@carlobeltrame The same issue with @react-pdf/font: 2.3.0. I guess it is related to fontkit package.

[carlobeltrame]

I see. Did you really uninstall and re-install react-pdf? It looks like you simply installed the font package instead of doing that. I just freshly installed react-pdf v3.0.0 in a project this week, and there were no problems whatsoever. And last month I also updated react-pdf in an existing project to v3.0.0, and had no problems with it.
Can you provide a reproduction repository which I can have a look at? Some other people have reported the same issues as you, but nobody so far has been able to provide that, and as long as I can't reproduce the issue it's impossible for me to pin the issue down.

[SashaShostyr]

@carlobeltrame Yes, I did fresh install rm -rf node_modules package-lock.json && npm i. You can check it in this repo https://github.com/SashaShostyr/react-pdf-renderer-issue, I've attached repo for reproducing to issue description as well.

[carlobeltrame]

Thanks! From a first look, it looks like this is a problem with Webpack 4, nothing really seems to be wrong with react-pdf. If I upgrade your sample project to Webpack 5 (according to the razzle instructions here), everything works as normal again. My working projects use webpack 5 and vite, which explains why I had no problems upgrading.

I found out that webpack 4 for some reason does not transpile the import * as fontkit from 'fontkit' and other statements in the @react-pdf/font package correctly. The fontkit variable just contains a URL where the fontkit code can be downloaded, instead of importing that code and providing it as a package as it is supposed to. It's good to know that there might be a general issue with webpack 4. Since webpack 4 is still relatively commonly used, I'll look into workarounds for webpack 4 which we could document here.

[carlobeltrame]

Someone in #2015 was quicker than me, and already found the root cause of the issue in webpack 4. If you cannot update to webpack 5, you either have to eject and adjust your config as described waku-org/js-waku#895 (comment) (or use craco or something similar to do that), or stay on @react-pdf/renderer < 3.0.0 until facebook/create-react-app#12605 or facebook/create-react-app#12021 is merged and released, and then update create-react-app.

[SashaShostyr]

@carlobeltrame Thank you! Have you tried this comment waku-org/js-waku#895 (comment) in repository that I attached? I still can't get it working with webpack v4, so if you had a chance to have a look and procide some working example (in my repository) it would be really cool.

[carlobeltrame]

I have tried it for a few hours, but did not manage to get it to work. Among other things, I tried setting the following razzle config:

'use strict';

module.exports = {
  options: {
    buildType: 'single-page-application',
  },
  modifyWebpackConfig ({ env: { target, dev }, webpackConfig, webpackObject, options: { pluginOptions, razzleOptions, webpackOptions }, paths }) {
    webpackConfig['module']['rules'][0].test = /\.(js|mjs|jsx|ts|tsx|cjs)$/
    console.log(webpackConfig['module'])
    return webpackConfig
  },
};

But that didn't help. That said, I don't really have much experience with Webpack 4 and React, and I have never heard of razzle before this issue, and don't really have time to get deeply accustomed with them.

I recommend you do one of the following:

• Just upgrade to Webpack 5, it's not that hard and you will have to do it sooner or later anyways
• Keep @react-pdf/renderer at v2.x and keep using Webpack 4
• Research Webpack 4 internals and find a config change that works for @react-pdf/renderer v3.0.0

[SashaShostyr]

@carlobeltrame Thanks for trying and notes. I use second option for now until upgrade to Webpack 5.