While setting up my TypeScript project in Visual Studio Code, I encountered an issue trying to incorporate bootstrap 4 along with Popper, jQuery, and Knockout.
I made sure to install the type definitions for knockout, jquery, and bootstrap using these commands:
npm install -–save @types/knockout
npm install -–save @types/jquery
npm install --save @types/bootstrap
Additionally, I referenced the required JS files in a require.js configuration:
declare var require: any;
require.config({
paths: {
"knockout": "externals/knockout-3.5.0",
"jquery": "externals/jquery-3.3.1.min",
"popper.js": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
"bootstrap": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
}
})
My tsconfig.json looks like this:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["types/*"]
},
"outDir": "./built/",
"sourceMap": true,
"noImplicitAny": true,
"module": "amd",
"target": "es5"
},
"files":[
"src/require-config.ts",
"src/hello.ts"
]
}
However, when compiling the project, I faced the following error:
node_modules/@types/bootstrap/index.d.ts:9:25 - error TS2307: Cannot find module 'popper.js'.
9 import * as Popper from "popper.js";
~~~~~~~~~~~
Found 1 error.
The terminal process terminated with exit code: 1
This error indicates that the Bootstrap type definition file couldn't locate the popper.js module.
Although the popper.js module exists in my @types folder:
node_modules
|-@types
| |- bootstrap
| |-index.d.ts (this is failing)
|- popper.js
|- index.d.ts (popper.js type definition)
How can I instruct the TypeScript compiler to look for the popper.js module higher up in the directory structure?
I've searched extensively but haven't found a solution. It seems like either I've come across a rare bug or missed a crucial setup step due to my lack of experience with TypeScript.
If you have any suggestions on how to resolve this issue, please let me know!