Attempted import error: 'open' is not exported from 'fontkit' (imported as 'fontkit')

[ceduch]

I just installed the @capsizecss/unpack library in my next.js 14 project and I'm getting the following error Attempted import error: 'open' is not exported from 'fontkit' (imported as 'fontkit'). when I open a page that's importing the package.

[michaeltaranto]

Thanks for opening this. Looking at the error I think that you might be using the fromFile API from unpack, which is designed to be used in a node context — opening a file given at a specified file path.

If you are trying to unpack metrics in the browser from a file picker input field you'll need to handle the Blob it returns, which can be done using the fromBlob API, something like:

import { fromBlob } from '@capsizecss/unpack';

<input
  type="file"
  onChange={async (ev) => {
    if (ev.currentTarget.files && ev.currentTarget.files[0]) {
      const metrics = await fromBlob(ev.currentTarget.files[0]);
      ...
    }
  }}
/>  

[ceduch]

I was trying to use fromUrl just like you do it on your site in GoogleFontSelector.tsx. I did not import the fromFile at all.

Maybe something is wrong in the way it's exported that doesn't work well with next.js. It migth be loading the entire unpack package client-side, but only what works client-side in the fontkit package. So unpack in my client has a reference to "open" but fontkit doesn't return it.