Estoy trabajando en una aplicación nextjs e instalé bootstrap. Los estilos funcionan, pero cuando intento importar el archivo bootstrap.bundle.js aparece un 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.Este es mi paquete.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" } }Este es mi archivo app.js
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;He buscado y probado diferentes soluciones. También instalé @types/bootstrap pero aún no funcionó. ¿Qué estoy haciendo mal? Necesito ayuda este tema me tiene tan confundido.
esto funcionó para mí
useEffect(() => { typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null }, [])Si usa Bootstrap 5 intente instalar propperjs
npm install @popperjs/core --saveAquí hay un par de correcciones que parecieron funcionar para mí. Asegúrese de que @types/bootstrap esté instalado.
Opción 1: en lugar de import("bootstrap/dist/js/bootstrap"); , intente simplemente import("bootstrap"); .
Opción 2: puede indicar a TypeScript dónde están los tipos para el módulo "bootstrap/dist/js/bootstrap" mediante la opción de rutas en tsconfig.json. Eso se vería algo como esto:
{ ... "compilerOptions": { "paths": { "bootstrap/dist/js/bootstrap" : ["./node_modules/types/bootstrap"] } }, ... }