Could not find a declaration file for module 'bootstrap/dist/js/bootstrap

Question

I'm working on a nextjs application and installed bootstrap. The styles work but when I try to import the bootstrap.bundle.js file I get an error

Could not find a declaration file for module 'bootstrap/dist/js/bootstrap'. 'c:/Users/HP/OneDrive/Documents/webapps/nft-marketplace/node_modules/bootstrap/dist/js/bootstrap.js' implicitly has an 'any' type.

This is my pacakage.json

{
  "name": "nft-marketplace",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@nomiclabs/hardhat-ethers": "^2.0.2",
    "@nomiclabs/hardhat-waffle": "^2.0.1",
    "@openzeppelin/contracts": "^4.3.1",
    "@popperjs/core": "^2.10.2",
    "axios": "^0.21.4",
    "bootstrap": "^5.0.0-beta3",
    "chai": "^4.3.4",
    "dropzone": "^5.9.3",
    "ethereum-waffle": "^3.4.0",
    "ethers": "^5.4.6",
    "hardhat": "^2.6.4",
    "ipfs-http-client": "^52.0.3",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "web3modal": "^1.9.4"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.1.6",
    "autoprefixer": "^10.3.4",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.10"
  }
}

This is my app.js file

import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
import { useEffect } from "react";
import "../styles/app.css";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

I have searched and tried different solutions. I have also installed @types/bootstrap but still didn't work. What am I doing wrong? I need help this issue has me so confused.

Answer 1

Here are a couple fixes that seemed to work for me. Make sure @types/bootstrap is installed.

Option 1: Instead of import("bootstrap/dist/js/bootstrap");, try just import("bootstrap");.

Option 2: You can tell typescript where the types are for the "bootstrap/dist/js/bootstrap" module by using the paths option in tsconfig.json. That would look something like this:

   {
     ...
     "compilerOptions": {
       "paths": {
         "bootstrap/dist/js/bootstrap" : ["./node_modules/types/bootstrap"]
       }
     },
     ...
   }