When using a JavaScript library that lacks @type definitions for TypeScript, I had to create my own .d.ts file named foo.d.ts. The project structure is as follows:
...
.next/
pages/
...
typings/
foo.d.ts
...
tsconfig.json
In my VS Code editor, the definition works fine and I can import it into my component like so:
import {Foo} from "foo";
However, during runtime I encounter an error in the browser console:
Module not found: Can't resolve 'foo'
I attempted to resolve this issue by adding the following to my tsconfig.json:
"typeRoots": [ "node_modules/@types", "typings" ]
I also tried explicitly including foo.d.ts in the include section alongside next-env.d.ts.
The contents of foo.d.ts are as follows:
declare module 'foo' {
declare interface ValidationError {
message?: string;
}
declare namespace Foo {
class Bar {
constructor(config: any, displayErrorsCallback: (data: ValidationError[]) => void, onSubmitTriggered: () => void);
}
}
}
Update (added 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"
]
}