typescript - Module not Found when using Custom Type .d.ts in Next.js - Stack Overflow

admin管理员组

文章数量:1356808

My question is extremely similar to this one: Use custom TypeScript typing .d.ts in nextjs (Module not found: Can't resolve ...) But the answer there doesn't seem to work for me.

Basically, I just created a Next.js (15.2.4) React Typescript project and I want to use a js library that doesn't have an existing @Type definition. So I made my own type file which corresponds with the js library. Let's call it testfoo.d.ts. My project structure is like this:

.next/
app/
node_modules/
public/
     assets/
            scripts/
                   testfoo.js
types/
     testfoo.d.ts
...
package.json
...
tsconfig.json

My testfoo.d.ts file looks like this:

// testfoo.d.ts
declare module "testfoo" {
  export interface ITest {
    disabled: boolean;
  }

  export class TestCl {
    constructor();
    go(): void;
  }
}

VS Code has no problem seeing the class and I can import it like this:

import { TestCl } from 'testfoo';

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "types/*.d.ts"],
  "exclude": ["node_modules"]
}

I've tried lots of suggestions. Among these, I tried using typeroots:

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

I tried adding to the 'paths' like this:

"paths": {
  "@/*": ["./*"],
  "@/types/*": ["types/*"]
}

I also tried adding .d to the filename and importing it like import { TestCl } from 'testfoo.d';

I've also tried deleting the .next directory and rebuilding. But I always get the same response when I try to build, Module not found: Can't resolve 'testfoo'.

I'm new to Next.js so I may be missing something simple. Any ideas? Thanks in advance.

My question is extremely similar to this one: Use custom TypeScript typing .d.ts in nextjs (Module not found: Can't resolve ...) But the answer there doesn't seem to work for me.

Basically, I just created a Next.js (15.2.4) React Typescript project and I want to use a js library that doesn't have an existing @Type definition. So I made my own type file which corresponds with the js library. Let's call it testfoo.d.ts. My project structure is like this:

.next/
app/
node_modules/
public/
     assets/
            scripts/
                   testfoo.js
types/
     testfoo.d.ts
...
package.json
...
tsconfig.json

My testfoo.d.ts file looks like this:

// testfoo.d.ts
declare module "testfoo" {
  export interface ITest {
    disabled: boolean;
  }

  export class TestCl {
    constructor();
    go(): void;
  }
}

VS Code has no problem seeing the class and I can import it like this:

import { TestCl } from 'testfoo';

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "types/*.d.ts"],
  "exclude": ["node_modules"]
}

I've tried lots of suggestions. Among these, I tried using typeroots:

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

I tried adding to the 'paths' like this:

"paths": {
  "@/*": ["./*"],
  "@/types/*": ["types/*"]
}

I also tried adding .d to the filename and importing it like import { TestCl } from 'testfoo.d';

I've also tried deleting the .next directory and rebuilding. But I always get the same response when I try to build, Module not found: Can't resolve 'testfoo'.

I'm new to Next.js so I may be missing something simple. Any ideas? Thanks in advance.

• typescript
• next.js
• react-tsx

Share Improve this question Follow edited Apr 3 at 22:33 McCrockett asked Mar 27 at 19:20 McCrockettMcCrockett 17111 silver badge1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

For anyone who comes across this, the file name should correspond to how you import the library. In my case, this seems to work regardless of the testfoo.d.ts file being located in the types directory:

// testfoo.d.ts   
declare module "@/public/assets/scripts/testfoo" {
  export interface ITest {
    disabled: boolean;
  }

  export class TestCl {
    constructor();
    go(): void;
  }
}

本文标签： typescriptModule not Found when using Custom Type dts in NextjsStack Overflow