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

marsmallos · 2022-09-09T07:43:57Z

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.

The text was updated successfully, but these errors were encountered:

vipindigiqt · 2022-09-12T05:07:39Z

+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 · 2022-09-13T17:40:38Z

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 · 2022-09-14T06:07:13Z

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 · 2022-09-14T06:08:10Z

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

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

marsmallos · 2022-09-14T12:43:18Z

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 · 2022-09-17T13:46:10Z

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

carlobeltrame · 2022-09-29T20:57:17Z

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 · 2022-09-29T21:11:16Z

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 · 2022-10-07T07:10:18Z

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 · 2022-10-07T08:39:09Z

@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 · 2022-10-10T07:25:57Z

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

surajdhungana46 · 2022-10-13T11:13:37Z

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 · 2022-10-13T11:21:55Z

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 · 2022-10-14T17:41:52Z

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 · 2022-10-21T10:16:44Z

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

GonzaloTD360 · 2022-10-21T16:00:39Z

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 · 2022-10-21T16:57:03Z

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

slavendam · 2022-11-01T21:57:09Z

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 · 2022-11-14T04:44:13Z

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

gyanvector · 2022-11-28T16:05:48Z

@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 · 2022-11-28T16:24:08Z

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

gyanvector · 2022-11-28T19:33:05Z

@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 · 2022-11-28T21:25:29Z

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 · 2023-06-05T21:15:23Z

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 · 2023-06-08T05:53:29Z

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 · 2023-06-08T07:42:17Z

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 · 2023-06-08T09:48:22Z

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:

Install patch-package https://www.npmjs.com/package/patch-package
add "postinstall": "patch-package" in scripts section of package.json
place fix in .\patches\react-scripts+4.0.3.patch
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 · 2023-06-08T09:55:58Z

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 · 2023-06-17T06:15:05Z

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:

Install patch-package https://www.npmjs.com/package/patch-package

add "postinstall": "patch-package" in scripts section of package.json

place fix in .\patches\react-scripts+4.0.3.patch

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

evgsil · 2023-06-17T09:28:21Z

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

upsu9 · 2023-06-17T13:29:08Z

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

I feel there is some version issue..a s i did all process again. Please check below ss

evgsil · 2023-06-17T14:17:06Z

It seems that you are not using react-scripts at all, it means that your application has not been created using create react app or was ejected. It is hard to tell without knowing your project setup, but you need update or create webpack.config.js and apply changes there manually

upsu9 · 2023-06-17T14:24:17Z

I have used CRA for my project

evgsil · 2023-06-17T15:24:05Z

which version of react-scripts do you have? Is it 4.0.3? If no, can you upgrade to the version?

upsu9 · 2023-06-17T15:46:21Z

it is same...what you have used

evgsil · 2023-06-17T16:00:12Z

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?

upsu9 · 2023-06-17T17:31:34Z

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.

aimeetacchi · 2023-06-22T13:52:10Z

What about rending Images and SVGS they still have something wrong with them, Creating a strange border...

biel-fyq · 2023-08-07T05:50:54Z

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]

Have you solved this problem yet

ShakhzodD · 2023-11-02T11:57:53Z

Did you find the answer?

zany49 · 2023-12-07T08:46:56Z

my node version is 18.16.1

dep:{
"@react-pdf/font": "^2.3.7",
"@react-pdf/renderer": "^3.0.0",
}

error :  'create' is not exported from 'fontkit' (imported as 'fontkit')

can any help me fix this

carlobeltrame mentioned this issue Sep 29, 2022

Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit'). #1991

Closed

carlobeltrame mentioned this issue Sep 29, 2022

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

Closed

bansaj mentioned this issue Oct 20, 2022

typeError while loading image in pdf. #2025

Closed

LeAnsman mentioned this issue Jun 5, 2023

Console error: Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit') #2324

Closed

diegomura added the bug label Feb 3, 2024

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

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

Comments

marsmallos commented Sep 9, 2022

vipindigiqt commented Sep 12, 2022

RrNn commented Sep 13, 2022

HasithaPriyasad commented Sep 14, 2022 • edited Loading

HasithaPriyasad commented Sep 14, 2022

marsmallos commented Sep 14, 2022

evgsil commented Sep 17, 2022 • edited Loading

carlobeltrame commented Sep 29, 2022

evgsil commented Sep 29, 2022 • edited Loading

dhananjay-nickelfox commented Oct 7, 2022 • edited Loading

carlobeltrame commented Oct 7, 2022

dhananjay-nickelfox commented Oct 10, 2022

surajdhungana46 commented Oct 13, 2022

marsmallos commented Oct 13, 2022 • edited Loading

genie4viz commented Oct 14, 2022

bansaj commented Oct 21, 2022

GonzaloTD360 commented Oct 21, 2022

marsmallos commented Oct 21, 2022

slavendam commented Nov 1, 2022

capitalch commented Nov 14, 2022

gyanvector commented Nov 28, 2022 • edited Loading

carlobeltrame commented Nov 28, 2022

gyanvector commented Nov 28, 2022 • edited Loading

carlobeltrame commented Nov 28, 2022

aimeetacchi commented Jun 5, 2023

Lu-Derik commented Jun 8, 2023 • edited Loading

carlobeltrame commented Jun 8, 2023

evgsil commented Jun 8, 2023 • edited Loading

aimeetacchi commented Jun 8, 2023

upsu9 commented Jun 17, 2023 • edited Loading

evgsil commented Jun 17, 2023

upsu9 commented Jun 17, 2023 • edited Loading

evgsil commented Jun 17, 2023

upsu9 commented Jun 17, 2023 • edited Loading

evgsil commented Jun 17, 2023

upsu9 commented Jun 17, 2023 • edited Loading

evgsil commented Jun 17, 2023

upsu9 commented Jun 17, 2023 • edited Loading

aimeetacchi commented Jun 22, 2023

biel-fyq commented Aug 7, 2023

ShakhzodD commented Nov 2, 2023

zany49 commented Dec 7, 2023

HasithaPriyasad commented Sep 14, 2022 •

edited

Loading

evgsil commented Sep 17, 2022 •

edited

Loading

evgsil commented Sep 29, 2022 •

edited

Loading

dhananjay-nickelfox commented Oct 7, 2022 •

edited

Loading

marsmallos commented Oct 13, 2022 •

edited

Loading

gyanvector commented Nov 28, 2022 •

edited

Loading

gyanvector commented Nov 28, 2022 •

edited

Loading

Lu-Derik commented Jun 8, 2023 •

edited

Loading

evgsil commented Jun 8, 2023 •

edited

Loading

upsu9 commented Jun 17, 2023 •

edited

Loading

upsu9 commented Jun 17, 2023 •

edited

Loading

upsu9 commented Jun 17, 2023 •

edited

Loading

upsu9 commented Jun 17, 2023 •

edited

Loading

upsu9 commented Jun 17, 2023 •

edited

Loading