Issue
Import Syntax Unclear For Types
The docs here show
import { <font-name> } from 'next/google/font';
It compiles but at run-time throws the error "module not found".
But this discussion shows:
import { <font-name> } from '@next/google/font';
This version throws this error at compile time.
It would help to at least know whether the "@" is required or not. I hope the docs are up-to-date and the discussion is not. Neither error that is thrown helps to disambiguate these 2 syntaxes!
This is an nx mono-repo
Btw, this is in a NextJs project inside a nrwl nx mono-repo.
I tried updating the package.json to include:
"@types/next": "13.1.1",
but that did not help.
Note that the package.json
is at the root of the monorepo (but all other deps and devDeps are there, so it must be the correct place, as sub-projects don't have their own package.json files).
Type Declaration File
Inside the app (ie. the sub-folder) is an index.d.ts
file where I tried adding:
declare module 'next/font/google'
and
declare module '@next/font/google'
Neither solved the problem.
Stackoverlfow similar issue
There is this on stackoverflow, but that did not help either.
Yarn lock file
In the yarn.lock
file is the following entry, which seems to package next inside the @nrwl namespace, so I tried '@nrwl/next/google/font' but that also did not work
"@nrwl/next@15.8.8":
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"
Solution
Before Next.js 13.2.0
- You need to add package @next/font
yarn add @next/font
/or/npm i @next/font
After Next.js 13.2.0 (Next.js 13.2.0 and higher)
- Next fonts package is included to Next.js by default, so you don't need to install extra package (if you have @next/font installed, remove it) and you need to import from the native package
next/font
instead of@next/font
(without the@
)
Answered By - Sebastian Voráč MSc.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.