next.js - Brug brugerdefineret TypeScript-typning .d.ts i nextjs (Modul ikke fundet: Kan ikke finde ...)

Jeg bruger et JS-bibliotek, som ikke leverer @type-definitioner til TypeScript, så jeg har lavet min egen .d.ts-fil. Lad os kalde den foo.d.ts. Min projektstruktur ser sådan her ud:

...
.next/
pages/
...
typings/
    foo.d.ts
...
tsconfig.json

Min VS Code har ingen problemer med den definition, og jeg kan importere i min komponent, som:

import {Foo} from "foo";

Men under køretid får jeg denne fejl i browserens konsol

Modul ikke fundet: Kan ikke finde 'foo'

Jeg har forsøgt at tilføje

"typeRoots": [ "node_modules/@types", "typings" ]

til min tsconfig.json, men det hjalp ikke. Jeg har også prøvet at tilføje foo.d.ts eksplicit til include-sektionen, hvor next-env.d.ts er tilføjet.

foo.d.ts ser sådan ud:

declare module 'foo' {
    declare interface ValidationError {
        message?: string;
    }
    declare namespace Foo {
        class Bar {
            constructor(config: any, displayErrorsCallback: (data: ValidationError[]) => void, onSubmitTriggered: () => void);
        }
    }
}

Opdatering (tilføjet tsconfig)

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "typeRoots": [
      "node_modules/@types",
      "typings"
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Svar #1

Tilføj bare .d efter filnavnet, så importer din typedefinition som import {Foo} from "foo.d"; Når du importerer *.d.ts, importer dem sådan, der er ikke behov for at ændre konfigurationer.

Svar #2

Med NextJS 14 stødte jeg på dette problem i dag.

Til sidst var jeg nødt til at specificere typeRoots på denne måde (det var ikke specificeret før og brugte en standard, jeg ikke kender til):

"typeRoots": [
  "@typings",
  "node_modules",
  "node_modules/@types"
],

Forklaringen (hvis jeg tager fejl på den korrekte måde):

  • @typings er min egen mappe til eksterne typer (indeholder kun d.ts-filer)
  • node_modules kan indeholde d.ts-typer, da nogle pakker udgiver disse sammen med deres kilder (dette var det, jeg manglede, og som gjorde, at next build brød sammen)
  • node_modules/@types er hvor moduler udgiver deres typinger (bedste praksis, men ikke altid fulgt)

Den fulde tsconfig.json-fil:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "types": [
      "node",
      "jest",
      "@testing-library/jest-dom"
    ],
    "typeRoots": [
      "@typings",
      "node_modules",
      "node_modules/@types"
    ],
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.mjs",
    "jest.config.js",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Relaterede artikler