Unable to locate the next/google/font module in my Typescript project

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.

https://i.sstatic.net/mU4MW.png

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"
typescriptnext.jsnrwl-nxnrwl

Answer №1

Before the Release of Next.js 13.2.0

  • In order to use fonts in your Next.js project, you had to manually add the package @next/font by running either yarn add @next/font or npm i @next/font

After Next.js 13.2.0 (Versions 13.2.0 and above)

  • With the release of Next.js 13.2.0, the fonts package is now included by default, eliminating the need for an extra installation (if you have @next/font installed, make sure to remove it). You will also need to import from the native package using next/font instead of @next/font (without the @)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the advantages of using interfaces in React?

Exploring Typescript's interface and its application in React has been an interesting journey for me. It seems that interfaces are used to define specific props that can be passed, acting as a form of protection against passing irrelevant props. My qu ...

reactjstypescript

Need to redirect all routes in nextjs when using i18n except for one specific route? Here's how you

Just a quick note: I have already gone through the suggested similar questions before posting. I am looking to perform a complete redirection of ALL app routes (which are localized through next's i18n config), including nested routes. from: /route/s ...

next.jshttp-redirect

Error with object props in React using Typescript

Here's a scenario; I have a list of 'Reviews' that I am trying to render. The Proptype for these reviews is as follows: export interface Props { title: string; name: string; reviewdesc: string; rating: number; } In the pare ...

javascriptreactjstypescript

How can interfaces be effectively integrated with node and mongoose?

I am working on a model interface where I need to fetch specific data from the record // file: code.interface.ts import { Document } from 'mongoose'; export interface CodeI extends Document { readonly _id: string; readonly logs: any; } Howe ...

node.jstypescriptmongoosenestjs

Could you provide an explanation of the styled() function in TypeScript?

const Flex = styled(Stack, { shouldForwardProp: (prop) => calcShouldForwardProp(prop), })<LayoutProps>(({ center, autoWidth, autoFlex, theme }) => ({ })); This syntax is a bit confusing to me. I understand the functionality of the code, b ...

typescriptmaterial-ui

Utilizing nested observables for advanced data handling

Consider the following method: public login(data:any): Observable<any> { this.http.get('https://api.myapp.com/csrf-cookie').subscribe(() => { return this.http.post('https://api.myapp.com/login', data); }); } I want to ...

javascriptangulartypescriptrxjsobservable

Linking a Mongoose schema to another Mongoose schema in a collection

As a newcomer to backend development, I am seeking solutions for a problem in my pizza restaurant project built in Next.js with Mongoose and a simple API. The main issue is how to efficiently handle additional options for each product without duplicating d ...

node.jsmongodbmongoosenext.jsmongoose-schema

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

javascriptreactjstypescript

Struggling with establishing connection logic between two database tables using Prisma and JavaScript

I'm facing a perplexing logic problem that is eluding my understanding. Within the context of using next-connect, I have a function designed to update an entry in the database: .put(async (req, res) => { const data = req.body; const { dob ...

typescriptnext.jsprismanext-connect

The function passed in NextJS is not a valid function

I'm attempting to transfer a function from a parent component to a child component, but I keep encountering TypeError: setVoiceInput is not a function Parent Code: // questionInput.js "use client"; import styles from './questionInput. ...

reactjsnext.js

Is there a way to optimize the re-rendering and redownloading of images files in map() when the useState changes? Perhaps we can consider using useMemo

This Chat application is designed with channels similar to the Slack App. Currently, I am utilizing a map() function for filtering within an array containing all channel data. The issue arises when switching between channels, resulting in re-rendering and ...

javascriptreactjsnext.jsreact-hooks

Is it possible to set up a universal type definition in TypeScript version 2 and above?

I have a collection of straightforward .ts files, not part of any projects but standalone .ts scripts. They implement certain node.js features. Both TypeScript and node type definitions are set up through the following commands: npm install -g typescript ...

javascriptnode.jsubuntutypescriptdefinitelytyped

What steps should I take to resolve the "You do not have authorization to access this directory or page" error in Azure App Services?

Currently, I am attempting to deploy my Next.js 13 application to AppServices using Github Actions. The compilation process on Github was successful, however, I am encountering an issue where my application does not seem to be deploying or starting up prop ...

javascriptazureiisnext.jsazure-web-app-service

Angular2 - how can I effectively organize the logic between my components and services?

Within my current project setup, I have the following structure implemented: I have a Component that interacts with a Service Class which in turn calls an external API. The specific logic that I need to implement is related solely to the user interface. ...

angulartypescript

Encountering a Next.js prerendering issue when using getStaticPaths

I am currently developing a Next.js application. Here is the structure of my files: cpanearme -components -listitem.js -pages -home -index.js -firm -[id].js Below is the code for a list item that redirects to the dynamic rout ...

javascriptnext.js

What is the method for importing the merge function from "lodash/merge" in TypeScript?

When using ES6, it's possible to import only a single function from a library in order to reduce the overall bundle size. For example: import merge from "lodash/merge" But in TypeScript, the statement above can trigger a compile error: Cannot find m ...

javascripttypescript

invoke the next function a different privateFunction within rxjs

I'm trying to figure out how to pass the resetPassword data to the _confirmToUnlock method in Typescript/RxJS. Here is my subscribe method: public invokeUnlockModal() { let resetPassword = { userName: this.user?.userName}; //i need to send this ...

angulartypescriptrxjs

Making changes to a single formControl in angular6 will cause the other formControl to be updated as

I have two select menus in my user interface with the same options. When I select an option in one menu, I want the other menu to display the same option, and vice versa. Currently, I am using the valueChanges method on the first formControl to update the ...

angulartypescripttypescript2.0

Adding a function to the Window in React & Next.js without using the onload event

Issue with External Script in React Next.js Project I am facing a problem with an external script within my React Next.js project. The script is located at . The script does not work correctly when navigating to the page using the next/link component fro ...

javascriptreactjsnext.js

Glitch causing incorrect images to appear while scrolling through FlashList

Currently, I am using the FlashList to showcase a list of items (avatars and titles). However, as I scroll through the list, incorrect images for the items are being displayed in a mixed-up manner. Based on the explanation provided in the documentation, t ...

reactjstypescriptreact-nativeflash-list