Bug when importing `defineFontProvider`: Package subpath './utils' is not defined by "exports"

[ziadomalikold]

Output of npx nuxi info:

Nuxt project info: 

------------------------------
- Operating System: Linux
- Node Version:     v20.14.0
- Nuxt Version:     3.11.2
- CLI Version:      3.11.1
- Nitro Version:    2.9.6
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, modules, fonts
- Runtime Modules:  @nuxt/[email protected]
- Build Modules:    -
------------------------------

My custom provider in ~/providers/ComputerModernFontProvider.ts:

import { defineFontProvider } from '@nuxt/fonts/utils'

export default defineFontProvider({
  async resolveFontFaces (fontFamily, defaults) {
    if (fontFamily === 'Computer Modern') {
      return { 
        fonts: [
          { 
            weight: 400,
            style: 'normal',
            src: { url: '<link-to-cdn>', format: 'otf' },
          },
          { 
            weight: 400,
            style: 'italic',
            src: { url: '<link-to-cdn>', format: 'otf' },
          },
          { 
            weight: 700,
            style: 'normal',
            src: { url: '<link-to-cdn>', format: 'otf' },
          },
        ]
      }
    }
  }
})

Picture of the Error:

Steps & Contribution

I find this super weird since ./utils is already defined in the package.json here. If someone could give me some pointers towards the solution, I'd happily create a PR. Thank you in advance.

[dosubot[bot]]

Hey @ziadomalik! 👋 I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this issue together while we wait for a human maintainer.

The error you're encountering suggests that the @nuxt/fonts package does not properly export the utils subpath. However, the utils subpath is indeed defined in the exports field of the package.json file.

To resolve this issue, ensure that you are importing defineFontProvider correctly. The correct import path should be:

import { defineFontProvider } from '@nuxt/fonts/utils'

This import path aligns with the exports field in the package.json:

"exports": {
  ".": {
    "types": "./dist/types.d.ts",
    "import": "./dist/module.mjs",
    "require": "./dist/module.cjs"
  },
  "./utils": {
    "types": "./dist/utils.d.mts",
    "import": "./dist/utils.mjs"
  }
}

If this does not resolve the issue, ensure that your project dependencies are up-to-date and that there are no conflicting versions of the @nuxt/fonts package. You can also try deleting node_modules and pnpm-lock.yaml and then reinstalling the dependencies:

rm -rf node_modules pnpm-lock.yaml
pnpm install

Additionally, make sure you are using the recommended version of the @nuxt/fonts package for Nuxt 3.11.2, which is 0.7.0 ^[1][2].

If the issue persists, it might be related to recent changes in the repository. There have been updates in version v0.7.0 that could affect module resolution and export paths ^[3][4].

Lastly, ensure you are using the recommended package manager version, [email protected], as specified in the package.json ^[1].

To continue talking to Dosu, mention @dosu.

[ziadomalikold]

Confirmed everything the bot said, I did everything right. Also: I reproduced this with the latest stable version of Yarn.

[qwerzl]

Custom providers should be defined in this way:

https://github.com/nuxt/fonts/blob/main/playground/providers/custom.ts

Edit: Ignore this. Sorry I didn't read it clearly.

[danielroe]

Possibly the issue is that we don't provide a solution for CJS/require, which might be how jiti is resolving the import. We can amend the build config.

[ziadomalikold]

Custom providers should be defined in this way:

https://github.com/nuxt/fonts/blob/main/playground/providers/custom.ts

Interesting, the docs tell a completely different story, thanks for clarifying. Will try this out.

Possibly the issue is that we don't provide a solution for CJS/require, which might be how jiti is resolving the import. We can amend the build config.

I will look into that, good opportunity to contribute.

[ziadomalikold]

Update:

I tried just updating the package.json & have the "exports" portion look like this:

"./utils": {
    "types": "./dist/utils.d.mts",
    "import": "./dist/utils.mjs",
+  "require": "./dist/utils.cjs"
}

This just results in the file being skipped:

The unbuild docs seem to indicate that this is enough, though I've never worked with it before. This will require me to do a bit of a deep-dive into the tool. I only have limited time, so it might take time for me to even attempt & solve this. If someone can provide pointers, that would be great.