Issue With Import Syntax for Font Types
The documentation here provides an example:
import { <font-name> } from 'next/google/font';This code compiles successfully, but throws a "module not found" error at runtime.
However, in this discussion, it suggests using:
import { <font-name> } from '@next/google/font';Using this syntax results in a compile time error.
It would be helpful to clarify whether the "@" symbol is required or not. The discrepancy between the two syntaxes is confusing!
Context: nx Mono-repo Environment
Notably, this issue arises in a NextJs project within an nrwl nx mono-repo.
I attempted to update the package.json with:
"@types/next": "13.1.1",
Unfortunately, this did not resolve the problem.
It's important to note that the package.json file is located at the root of the mono-repo, as sub-projects do not have their own separate package.json files.
Attempted Solutions In Type Declaration Files
Within the specific app's directory, I created an index.d.ts file and added:
declare module 'next/font/google'and
declare module '@next/font/google'Neither of these declarations fixed the issue.
Similar Issue on Stackoverflow
I also checked this thread on stackoverflow, but it did not offer a solution.
Exploring Yarn Lock File
Looking into the yarn.lock file, I found an entry referencing next inside the @nrwl namespace. I tried using '@nrwl/next/google/font' based on this information, but it did not work either.
"@nrwl/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="224c475a566213170c1a0c1a">[email protected]</a>":
version "15.8.8"
resolved "https://registry.npmjs.org/@nrwl/next/-/next-15.8.8.tgz"
integrity sha512-h7sYBf8ljyfXyoSCgiHxukB/AyZsHNL8g+vSVmr7iCkVd6IgFIa1n3myM7vaALAVrJ0EccXYdK7yuKHbVvfLnA==
dependencies:
"@babel/plugin-proposal-decorators" "^7.14.5"
"@nrwl/devkit" "15.8.8"
"@nrwl/js" "15.8.8"
"@nrwl/linter" "15.8.8"
"@nrwl/react" "15.8.8"
"@nrwl/workspace" "15.8.8"
"@svgr/webpack" "^6.1.2"
chalk "^4.1.0"
copy-webpack-plugin "^10.2.4"
dotenv "~10.0.0"
express "^4.18.1"
fs-extra "^11.1.0"
http-proxy-middleware "^2.0.6"
ignore "^5.0.4"
semver "7.3.4"
ts-node "10.9.1"
tsconfig-paths "^4.1.2"
tsconfig-paths-webpack-plugin "4.0.0"
url-loader "^4.1.1"
webpack-merge "^5.8.0"