Bootstrap 4 TypeScript Type Definition не компилируется - не удается найти модуль popper.js

Я пытаюсь создать проект TypeScript и заставить bootstrap 4 работать вместе с Popper, jQuery и Knockout в Visual Studio Code.

Я установил определения типов knockout, jquery и bootstrap,

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

ссылается на файлы JS в конфигурации require.js

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"
    }
})

мой tsconfig.json это:

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

Я иду на компиляцию проекта и получаю следующую ошибку:

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

Похоже, мой файл определения типа Bootstrap не компилируется, так как не может найти модуль popper.js.

Модуль popper.js находится в моей папке @types

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

Как сообщить компилятору TypeScript, что файл popper.js, который ищет определение типа начальной загрузки, расположен выше в иерархии?

Я не смог найти ответов даже близко к этому. Итак, либо я наткнулся на ошибку, с которой еще никто не сталкивался (маловероятно), либо я новичок в Typescript, я неправильно настроил свою среду и пропустил очень простой шаг настройки, который получают все остальные, и, следовательно, никто никогда не пришлось спросить (очень вероятно).

Что я могу сделать, чтобы это исправить?

Источник

2 ответа

Решение

Для вас два варианта:

  • удалить "module": "amd" вариант конфигурации ИЛИ
  • добавить "moduleResolution": "node" вариант.

Второй вариант выглядит так:

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

Почему эти варианты работают?

Короче говоря, когда мы используем amdmodules, стратегия разрешения модулей по умолчанию - Classic, а не Node. Важное различие между ними заключается в том, что стратегия Node распознает имена каталогов как модули, тогда как классическая стратегия - нет.

Здесь есть дополнительная информация о стратегиях разрешения модулей.

Источник

Это первый результат, который пришел ко мне, когда у меня возникла проблема.

Этот комментарий Github мне помог.

Для этой библиотеки требуется библиотека DOM (среда браузера)

Вы должны добавить dom, а также es2017 в compilerOptions.lib в tsconfig.json.

Я только добавил "lib": [ "DOM" ] к моему tsconfig.json чтобы он работал на меня, и я все еще нацелен es5.

Источник
Другие вопросы по тегам