在Typescript中找不到next/google/font模块

rdlzhqv9 于 2023-04-20 发布在 TypeScript

关注(0)|答案(1)|浏览(203)

导入类型语法不明确

文档here显示
import { <font-name> } from 'next/google/font';
它编译，但在运行时抛出错误“模块未找到”。

但this讨论显示：
import { <font-name> } from '@next/google/font';
此版本在编译时抛出此错误。

至少知道“@”是否是必需的会有帮助。我希望文档是最新的，讨论不是。抛出的错误都无助于消除这两种语法的歧义！

这是一个nx mono-repo

顺便说一句，这是在nrwl nx mono-repo中的NextJs项目中。
我尝试更新package.json以包括：

"@types/next": "13.1.1",

但这并没有帮助。
请注意，package.json位于monorepo的根目录（但所有其他的dep和devDeps都在那里，所以它必须是正确的位置，因为子项目没有自己的package.json文件）。

类型声明文件

在应用程序（即子文件夹）中有一个index.d.ts文件，我尝试在其中添加：
declare module 'next/font/google'
和
declare module '@next/font/google'
两者都没有解决问题。

Stackoverlfow类似问题

有this on stackoverflow，但这也没有帮助。

Yarn锁文件

在yarn.lock文件中有以下条目，它似乎将next打包在@nrwl名称空间中，因此我尝试了'@nrwl/next/google/font'，但也不起作用

"@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"

next.js

来源：https://stackoverflow.com/questions/76002076/cannot-find-next-google-font-module-in-typescript

1条答案

按热度按时间

uemypmqf1#

好吧，NextJs文档根本不清楚这一点。
原来next/font是一个单独的包。
所以解决方案看起来像这样，非常简单：

包.json

...
  "dependencies": {
    "@nrwl/next": "15.8.8",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-is": "18.2.0",
    "styled-components": "5.3.6",
    "swiper": "^9.2.0",
    "tslib": "^2.3.0",
    "@next/font": "13.1.1,"
  },

_app.tsx

import { AppProps } from 'next/app';
import Head from 'next/head';
import 'swiper/css';
import 'swiper/css/pagination';
import './styles.css'
import { Figtree } from '@next/font/google';
// import localFont from '@next/font/local' <- if you want to use local fonts

const googleFont = Figtree({
  weight: '400',
  subsets: ['latin'],
})

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Welcome to www.dicer.ai!</title>
      </Head>
      <main className={`app ${googleFont.className}`}>
        <Component {...pageProps} />
      </main>
    </>
  );
}

export default CustomApp;

赞(0）回复(0）举报 2023-04-20

我来回答