Bootstrap 4 TypeScript Type Definition fails to compile - Cannot find module 'popper.js'

Question

I am attempting to set up a TypeScript project and get bootstrap 4 working along with Popper, jQuery, and Knockout in Visual Studio Code.

I installed the knockout, jquery and bootstrap type definitions,

npm install -–save @types/knockout
npm install -–save @types/jquery
npm install --save @types/bootstrap

referenced the JS files in a require.js config

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 is this:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { 
            "*": ["types/*"] 
        },
        "outDir": "./built/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "amd",
        "target": "es5"
    },
    "files":[
        "src/require-config.ts",
        "src/hello.ts"
    ]
}

I go to compile the project and I get 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

It appears my Bootstrap type definition file fails compilation as it cannot find the popper.js module.

The popper.js module is in my @types folder

node_modules
 |-@types
 |  |- bootstrap
 |     |-index.d.ts (this is failing)
 |- popper.js
    |- index.d.ts (popper.js type definition)

How do I tell the TypeScript compiler that the popper.js that the bootstrap type definition is looking for is located higher up in the hierarchy?

I haven't been able to find any answers even close to this. So, either I have stumbled across a bug no one else has ever run into (unlikely), or being new to Typescript, I have improperly set up my environment and missed a very basic setup step that everyone else gets and thus no one has ever had to ask (very likely).

What can I do to fix this?

Answer 1

Two options for you:

• remove the "module": "amd" configuration option OR
• add the "moduleResolution": "node" option.

The second option looks like this:

"moduleResolution": "node",
"module": "amd",

Why do these options work?

In short, when we use amd modules, the default module resolution strategy is Classic as opposed to Node. The important difference between the two is that the Node strategy recognizes directory names as modules whereas the Classic strategy does not.

There is more information on module resolution strategies here.