react-pdf: Console error: Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit'). after upgrading @react-pdf/renderer to 3.0.0

After lots of additional issues all starting from my unfortunate initial decision to upgrade this package to v.3.0.0 (I’m on webpack 4) my fix ended up being

• Delete node modules (I recommend backing up the contents of this folder if you’re gonna do this just in case you mess something up)
• Delete package lock (same here)
• Adding the following

“dependencies”: { “@react-pdf/font”: “2.2.1”, “@react-pdf/fontkit”: “2.0.2”, “@react-pdf/pdfkit”: “2.1.0”, “@react-pdf/renderer”: “2.0.19”, }

“overrides”: { “react-error-overlay”: “6.0.9”, “@react-pdf/font”: “2.2.1”, “@react-pdf/fontkit”: “2.0.2”, “@react-pdf/pdfkit”: “2.1.0” },

And doing npm install again

Don’t ask me why this worked because I don’t know. It might not work for you.

For React version 16.15.1 with yarn and @react-pdf/renderer": "3.0.0

This is if you are using yarn for npm users you can use the @RrNn fix

Added an resolutions key to your package.json that looks like;

"resolutions": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
  },

So, finally you will have a package.json that looks like;

// other stuff in the package.json file
"dependencies": {
// other dependencies in the package.json file
   "@react-pdf/renderer": "3.0.0"
}
"resolutions": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
}
// other stuff in the package.json file

As I said in my previous comment, the problem is not with the webpack itself, but rather with default webpack.config.js from create react app look here for details. By default, webpack (with unmodified config) treats .cjs modules as assets (the same way like .jpg and .png), and instead of importing source code it just imports relative path of module file

“resolutions”: { “@react-pdf/font”: “2.2.1”, “@react-pdf/pdfkit”: “2.1.0” },

For Yarn users simply replace “overrides” with “resolutions”

Webpack 4 was released in February 2018, and the last v4 version of webpack was released in September of 2020. Sorry to say, but Webpack 5 has been around for longer than webpack 4’s entire lifespan. So we might be closer to webpack 6 than to webpack 4 by now. I think it’s safe to say not many open source maintainers will have time to help with setups which have been outdated for 3 years.

Fix by updating react scripts to v5. Other overrides/resolution fixes break down Image rendering.

Unfortunately “overrides”/“resolutions” solution breaks <Image/> support. The root of this problem is that CRA does not support cjs modules (which is format of fontkit dependency). This should be fixed by https://github.com/facebook/create-react-app/pull/12605. I’ve applied changes from the fix manually and now it works. I’ve used patch-package to persist my changes but craco should work as well

Could you try to run git apply "patches\react-scripts+4.0.3.patch" from the root directory of your project. What output it shows?

its successfully compiles dear. Thanks a lot for demo repo. it helps a lot to fix the issue… everything works fine now. I cloned my repo again, then did one by one process again . and its successfully done now.

Using React version ^16.14.0 with @react-pdf/renderer": "^2.2.0 and i upgraded like;

• Updated @react-pdf/renderer from ^2.2.0 to 3.0.0
• Added an overrides key to my package.json that looks like;

"overrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
  }

Note that I am using npm not yarn So, finally i have a package.json that looks like;

// other stuff in the package.json file
"dependencies": {
// other dependencies in the package.json file
   "@react-pdf/renderer": "3.0.0"
}
"overrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
}
// other stuff in the package.json file

And everything worked fine after that

For me @react-pdf/renderer 3.0.0. didn’t work because this version require @react-pdf/pdfkit 3.0.0 which creates error. Even @react-pdf/pdfkit 2.4.0 created error.

Highest working version of @react-pdf/renderer (which didn’t require problematic pdfkit) is 2.2.0

“dependencies”: { “@react-pdf/font”: “2.2.0”, “@react-pdf/layout”: “3.1.2”, “@react-pdf/pdfkit”: “2.1.0”, “@react-pdf/renderer”: “2.2.0”, }

“overrides”: { “@react-pdf/font”: “2.2.0”, “@react-pdf/layout”: “3.1.2”, “@react-pdf/pdfkit”: “2.1.0” }

Using React version ^16.14.0 with @react-pdf/renderer": "^2.2.0 and i upgraded like;

• Updated @react-pdf/renderer from ^2.2.0 to 3.0.0
• Added an overrides key to my package.json that looks like;

"overrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
  }

Note that I am using npm not yarn So, finally i have a package.json that looks like;

// other stuff in the package.json file
"dependencies": {
// other dependencies in the package.json file
   "@react-pdf/renderer": "3.0.0"
}
"overrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
}
// other stuff in the package.json file

And everything worked fine after that