找不到模块"引导程序/dist/js/引导程序"的声明文件

Question

我正在研究nextjs应用程序并安装了bootstrap。样式工作，但当我试图导入bootstrap.bundle.js文件时，我得到一个错误

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.

这是我的package .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"
}
}

这是我的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;

我已经搜索并尝试了不同的解决方案。我还安装了@types/bootstrap，但仍然不起作用。我做错了什么?我需要帮助，这个问题把我弄糊涂了。

Answer 1

这里有几个补丁,似乎为我工作。确保@types/bootstrap已经安装。

选项1:不是import("bootstrap/dist/js/bootstrap");，而是import("bootstrap");。

选项2:你可以使用tsconfig.json中的paths选项告诉typescript"bootstrap/dist/js/bootstrap"模块的类型在哪里。它看起来像这样:

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

Answer 2

这对我有用

useEffect(() => {
typeof document !== undefined 
? require('bootstrap/dist/js/bootstrap') 
: null
}, [])

Answer 3

如果你使用bootstrap 5尝试安装properperjs

npm install @popperjs/core --save

Answer 4

如果您正在使用Vue Vite并且已经下载了npm i --save-dev @types/bootstrap。您将尝试下一步，即在env.d.ts文件夹中添加一行代码，添加declare module "boostrap"