" /> " /> "/>

TypeError: Popper.createPopper is not a function

255 Views Asked by At

I'm trying to make a webapp with just typescript and bootstrap

This is how I import my bootstrap and popper in my index.html

<script type="importmap">
    {
        "imports": {
            "@popperjs/core": "/node_modules/@popperjs/core/dist/umd/popper.min.js",
            "bootstrap": "/node_modules/bootstrap/dist/js/bootstrap.esm.min.js"
        }
    }
</script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<script type="module" src="index.js"></script>

I have tried to change bootstrap import to a bundled js like

<script type="importmap">
    {
        "imports":{
            "@popperjs/core": "/node_modules/@popperjs/core/dist/umd/popper.min.js",
            "bootstrap": "/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
        }
    }
</script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<script type="module" src="index.js"></script>

But this causes

Uncaught SyntaxError: The requested module 'bootstrap' does not provide an export named 'Tooltip' (at index.js:11:10)

My index.ts imports Tooltip like this:

import {Tooltip} from "bootstrap";

The popper.min.js, bootstrap.esm.min.js, and bootstrap.bundle.min.js are all installed in their respective paths.

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports" : true,
    "esModuleInterop" : true,
    "allowJs" : true
  },
  "include": [
    "src/**/*.ts",
  ]
}
0

There are 0 best solutions below