Typescript error import * as Popper from "Popper.js";

Question

I have an error in the terminal, I already installed @types/bootstrap @types/jquery and asked to install @types/Popper.js I did it but it is returning me this error:

node_modules/@types/bootstrap/index.d.ts:9:25 - error TS2307: Cannot find module 'popper.js'.

9 import * as Popper from "popper.js";

Someone knows a solution to this?

package json.:

{
  "name": "admin",
  "version": "1.0.0",
  "description": "This is the Admin template with the bootstrap 4",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp",
    "compile": "tsc",
    "start": "tsc -w"
  },
  "keywords": [
    "admin",
    "templates",
    "boostrap4",
    "admin",
    "dashboard"
  ],
  "author": "Nirav joshi",
  "license": "ISC",
  "devDependencies": {
    "@types/bootstrap": "^4.2.0",
    "@types/jquery": "^3.3.29",
    "@types/popper.js": "^1.11.0",
    "gulp": "^3.9.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-npm-dist": "^1.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0",
    "typescript": "^3.2.2"
  },
  "dependencies": {
    "@claviska/jquery-minicolors": "^2.2.6",
    "block-ui": "^2.70.1",
    "bootstrap": "^4.1.0",
    "bootstrap-colorpicker": "^2.5.2",
    "bootstrap-datepicker": "^1.8.0",
    "bootstrap-duallistbox": "^3.0.6",
    "bootstrap-material-datetimepicker": "^2.7.3",
    "bootstrap-switch": "^3.3.4",
    "bootstrap-touchspin": "^4.2.3",
    "chart.js": "^2.7.2",
    "chartist": "^0.11.0",
    "chartist-plugin-tooltips": "^0.0.17",
    "ckeditor": "^4.9.2",
    "clockpicker": "0.0.7",
    "cropper": "^4.0.0",
    "datatables": "^1.10.13",
    "datatables.net-bs4": "^1.10.16",
    "daterangepicker": "^3.0.1",
    "dragula": "^3.7.2",
    "dropzone": "^5.4.0",
    "echarts": "^4.0.4",
    "flot": "^0.8.0-alpha",
    "footable": "^2.0.6",
    "fullcalendar": "^3.9.0",
    "gaugeJS": "^1.3.6",
    "gmaps": "^0.4.24",
    "inputmask": "^3.3.11",
    "jquery": "^3.3.1",
    "jquery-asColorPicker": "^0.4.4",
    "jquery-sessiontimeout": "^1.1.0",
    "jquery-steps": "^1.1.0",
    "jquery-validation": "^1.17.0",
    "jquery.repeater": "^1.2.1",
    "jsgrid": "^1.5.3",
    "jvectormap": "^2.0.4",
    "magnific-popup": "^1.1.0",
    "masonry-layout": "^4.2.1",
    "moment": "^2.22.1",
    "morris.js": "^0.5.0",
    "nouislider": "^11.1.0",
    "nestable": "^0.2.0",
    "perfect-scrollbar": "^0.6.11",
    "pickadate": "^3.5.6",
    "popper.js": "^1.14.3",
    "quill": "^1.3.6",
    "raphael": "^2.2.7",
    "raty-js": "^2.8.0",
    "select2": "^4.0.6-rc.1",
    "summernote": "^0.8.10",
    "sweetalert2": "^7.19.3",
    "tablesaw": "^3.0.9",
    "tinymce": "^4.7.11",
    "toastr": "^2.1.4",
    "typeahead.js": "^0.11.1",
    "wnumb": "^1.1.0"
  }
}

Answer 1

From what I read, it’s a problem regarding the types used in Popper.js and the typescript types. It is necessary to make a correction by providing the types correctly.

The code below can help you and then you can import by doing.

Obs the first line is important as it is a directive that indicates the path to Typescript.

/// <reference path="./types/popper.js.d.ts" />
import Popper = require("popper.js");

create the code in ./types/pooper.js.d.ts

declare class Popper {
static modifiers: (Popper.BaseModifier & { name: string })[];
static placements: Popper.Placement[];
static Defaults: Popper.PopperOptions;
    options: Popper.PopperOptions;
constructor(reference: Element | Popper.ReferenceObject, popper: Element, options?: Popper.PopperOptions);
    destroy(): void;
    update(): void;
    scheduleUpdate(): void;
    enableEventListeners(): void;
    disableEventListeners(): void;
}
declare namespace Popper {
export type Position = 'top' | 'right' | 'bottom' | 'left';
export type Placement = 'auto-start'
| 'auto'
| 'auto-end'
| 'top-start'
| 'top'
| 'top-end'
| 'right-start'
| 'right'
| 'right-end'
| 'bottom-end'
| 'bottom'
| 'bottom-start'
| 'left-end'
| 'left'
| 'left-start';
export type Boundary = 'scrollParent' | 'viewport' | 'window';
export type Behavior = 'flip' | 'clockwise' | 'counterclockwise';
export type ModifierFn = (data: Data, options: Object) => Data;
export interface BaseModifier {
        order?: number;
        enabled?: boolean;
        fn?: ModifierFn;
    }
export interface Modifiers {
        shift?: BaseModifier;
        offset?: BaseModifier & {
            offset?: number | string,
        };
        preventOverflow?: BaseModifier & {
            priority?: Position[],
            padding?: number,
            boundariesElement?: Boundary | Element,
            escapeWithReference?: boolean
        };
        keepTogether?: BaseModifier;
        arrow?: BaseModifier & {
            element?: string | Element,
        };
        flip?: BaseModifier & {
            behavior?: Behavior | Position[],
            padding?: number,
            boundariesElement?: Boundary | Element,
        };
        inner?: BaseModifier;
        hide?: BaseModifier;
        applyStyle?: BaseModifier & {
            onLoad?: Function,
            gpuAcceleration?: boolean,
        };
        computeStyle?: BaseModifier & {
            gpuAcceleration?: boolean;
            x?: 'bottom' | 'top',
            y?: 'left' | 'right'
        };
        [name: string]: (BaseModifier & Record<string, any>) | undefined;
    }
export interface Offset {
        top: number;
        left: number;
        width: number;
        height: number;
    }
export interface Data {
        instance: Popper;
        placement: Placement;
        originalPlacement: Placement;
        flipped: boolean;
        hide: boolean;
        arrowElement: Element;
        styles: CSSStyleDeclaration;
        boundaries: Object;
        offsets: {
            popper: Offset,
            reference: Offset,
            arrow: {
                top: number,
                left: number,
            },
        };
    }
export interface PopperOptions {
        placement?: Placement;
        positionFixed?: boolean;
        eventsEnabled?: boolean;
        modifiers?: Modifiers;
        removeOnDestroy?: boolean;
        onCreate?(data: Data): void;
        onUpdate?(data: Data): void;
    }
export interface ReferenceObject {
        clientHeight: number;
        clientWidth: number;
        getBoundingClientRect(): ClientRect;
    }
}
declare module "popper.js" {
export = Popper;
}