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

[marsmallos]

Hello,

After updating @react-pdf/renderer from 2.0.2 to 3.0.0 in my react app I'm getting the following error in the console, and the react website freezes:

./node_modules/@react-pdf/font/lib/index.browser.es.js
Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

I have tried updating the fontkit package to the latest version but it already was the latest version. My node version is v16.13.2. Please help.

[vipindigiqt]

+1 to this.

I'm happy with the package for now, but It's preventing me from updating my webpack (react-scripts package) to 5.

I was waiting for an update, it did update, but Now I'm facing this fontkit error as mentioned by @marsmallos

[RrNn]

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

[HasithaPriyasad]

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

[HasithaPriyasad]

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

For Yarn users simply replace "overrides" with "resolutions"

[marsmallos]

Omg @RrNn you are my hero, your fix worked for me! I had been stuck on this for almost a week. It now works when I run the react app in firefox. When trying to run it in electron, however, I get "RangeError: Array buffer allocation failed" and it seems to be related to reactpdf renderer.

I'm thinking of switching from this package since it's currently not working properly, does anybody know any alternatives?

[evgsil]

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

[carlobeltrame]

Hey guys, over at #2028 I found out that this is most likely an issue with webpack 4. Upgrading to webpack 5 at the same time as react-pdf 3.0.0 fixed the problem there. Can you try that?

[evgsil]

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

[dhananjay-nickelfox]

TypeError: fontkit__WEBPACK_IMPORTED_MODULE_6__.create is not a function.

Facing this issue. Not able to download the pdf due to this. Showing loading document.

Using 3.0,0 version of react pdf. Have tried the above solutions. Nothing worked.

[carlobeltrame]

@dhananjay-nickelfox Yes, as stated above, you will have to update to Webpack 5, or stay on @react-pdf/renderer v2.x until Webpack 4 has fixed their .cjs file compatibility.

[dhananjay-nickelfox]

@carlobeltrame Have downgraded it to 2.x version and webpack 4.. Still facing the same issue. Any suggestion?

[surajdhungana46]

npm 6.14.11 and react version 17.0.2 "dependencies": { "@react-pdf/font": "^2.1.0", "@react-pdf/fontkit": "^2.1.0", "@react-pdf/pdfkit": "^2.1.0", "@react-pdf/renderer": "^2.1.0", } "overrides": { "@react-pdf/font": "2.1.0", "@react-pdf/pdfkit": "2.1.0" },

Tried above but still got this: Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

[marsmallos]

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.

[genie4viz]

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.

Thanks for your update!

[bansaj]

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

[GonzaloTD360]

I tried the @RrNn answer but didn't work for me, i guess i will try with another package. [my react V: 18, my node V: 16]

[marsmallos]

@bansaj I'm rendering images in my PDF:s using the overrides/versions I mentioned above

[slavendam]

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" }

[capitalch]

I had got the same issue. Nothing worked. But finally [marsmallos]'s solution worked for me.

[gyanvector]

@carlobeltrame Hi, I have updated node version from v14 to v16 , After updating the node version I got the same error and have changed nothing extra. I have tried above all the methods but nothing worked. Could you please help?

[carlobeltrame]

@gyanvector it's not an issue with the node version, but with webpack 4. Upgrading to webpack 5 will resolve the problem.

[gyanvector]

@carlobeltrame But before updating node to v16, My project was working fine without any errors even-though I had webpack 4. The problem came when I updated the node version

[carlobeltrame]

That means you must have at the same time updated @react-pdf/renderer from 2.x to 3.x. What's in your package.json, and do you use a package-lock.json which you check into version control?

[aimeetacchi]

Could someone help as this has been installed and now has messed up a hi-charts variable pie chart SVG that I was rendering in the PDF, it's created a border all around the SVG and I believe its from installing - all these packages as I only had @react-pdf/renderer installed before, then it's been coming up with this error on this issue. so I've installed them extra ones mentioned - "@react-pdf/font": "2.2.0", "@react-pdf/layout": "3.1.2", "@react-pdf/pdfkit": "2.1.0",

also added in
"resolutions": { "@react-pdf/font": "2.2.0", "@react-pdf/layout": "3.1.2", "@react-pdf/pdfkit": "2.1.0", "react-scripts/**/react-error-overlay": "6.0.9" }

fix the error but has cause my PDF to have this Strange border around the outside of the variable pie... and I haven't added in any border to styles..

[Lu-Derik]

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 facebook/create-react-app#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

Yes, this solution breaks Image. I need to put some images in my pdf, and I cannot upgrade to WebPack5, I really need a solution to make Image works.

[carlobeltrame]

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.

[evgsil]

Yes, this solution breaks Image. I need to put some images in my pdf, and I cannot upgrade to WebPack5, I really need a solution to make Image works.

This is my fix for react-scripts 4.0.3 (the latest one with the webpack 4) : https://gist.github.com/evgsil/dca654498a0c9a1cafaba9e3b9456e63

To apply fix:

1. Install patch-package https://www.npmjs.com/package/patch-package
2. add "postinstall": "patch-package" in scripts section of package.json
3. place fix in .\patches\react-scripts+4.0.3.patch
4. run npm install

PS: If you are not using create react app or using craco or "ejected" your configs: Just apply changes from the fix to your webpack.config.js manually

If you have tried overrides solution first: revert the overrides back

What fix does: It adds support for the cjs modules (which is how fontkit is built). After the fix, webpack will import the code from cjs instead of just file path as it does by default

[aimeetacchi]

Why has this broken a version I was using though. it was all fine. then it starting showing an error and I installed these extra packages and it has now created a border around my rendered SVG that displays in the PDF. I never upgraded any of the packages.

[upsu9]

Yes, this solution breaks Image. I need to put some images in my pdf, and I cannot upgrade to WebPack5, I really need a solution to make Image works.

This is my fix for react-scripts 4.0.3 (the latest one with the webpack 4) : https://gist.github.com/evgsil/dca654498a0c9a1cafaba9e3b9456e63

To apply fix:

1. Install patch-package https://www.npmjs.com/package/patch-package
2. add "postinstall": "patch-package" in scripts section of package.json
3. place fix in .\patches\react-scripts+4.0.3.patch
4. run npm install

PS: If you are not using create react app or using craco or "ejected" your configs: Just apply changes from the fix to your webpack.config.js manually

If you have tried overrides solution first: revert the overrides back

What fix does: It adds support for the cjs modules (which is how fontkit is built). After the fix, webpack will import the code from cjs instead of just file path as it does by default

I have tried following your steps ...but getting same error. as below

I have tried following your steps ...but getting same error. as below

[evgsil]

Make sure that during npm install it says something like this:

> [email protected] postinstall
> patch-package

patch-package 6.5.1
Applying patches...
[email protected] ✔

added xxx packages...

Here is bare minimum project with the applied fix https://github.com/evgsil/react-pdf-webpack4-bugfix