Module not Found when using Custom Type .d.ts in Next.js

Question

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.

Answer 1

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; } }