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 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]

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.