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?

Shaun Luttin · Accepted Answer · 2019-02-26T20:34:22.647

20

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.

edited Feb 26 '19 at 20:34

answered Feb 26 '19 at 20:19

Shaun Luttin

133,272
81
405
467

:/ Figure it was something like that. Easy win. Thanks. – aszalacinski Feb 26 '19 at 20:27
Which option did you choose? – Shaun Luttin Feb 26 '19 at 20:28
2

The second option works. Appreciate the explanation... always be learning. – aszalacinski Feb 26 '19 at 21:06
Greate answer,. It helped me with my bootstrap 4.3.1 popper.js 1.11 problem. I added moduleResolution: node and the compile error went away. – Karl Apr 14 '19 at 05:55
1

moduleResolution:node worked on BS 4.3 & popper 1.11 - something that's been working for months and just started failing (VS2019). It's so frustrating when things are working and then they're not :(. Thanks for the fix. – Tony Basallo Jan 28 '20 at 05:22

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

This is the first result that came up for me when I had the issue.

This Github comment helped me.

This library requires DOM library (browser environment)

You should add dom as well as 'es2017' to compilerOptions.lib in tsconfig.json.

I only added "lib": [ "DOM" ] to my tsconfig.json to make it work for me and I'm still targeting es5.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 24 '20 at 22:13

John Pavek

2,595
3
15
33

1

Doesn't work for me; the bootstrap definition imports popper but popper definitions dont exist in the normal @types folder ... changing the library wont make any difference to that surely – Dan Jul 07 '20 at 20:19

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

2 Answers2

Linked