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.
this worked for me
useEffect(() => {
typeof document !== undefined
? require('bootstrap/dist/js/bootstrap')
: null
}, [])
If you use bootstrap 5 try to install propperjs
npm install @popperjs/core --save
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"]
}
},
...
}