next.js 找不到模块“bootstrap/dist/js/bootstrap”的声明文件

ryevplcw 于 2022-12-29 发布在 Bootstrap

关注(0)|答案(4)|浏览(239)

我正在使用一个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.

这是我的包. 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，但仍然不起作用。我做错了什么？我需要帮助这个问题让我很困惑。

next.js

来源：https://stackoverflow.com/questions/69527455/could-not-find-a-declaration-file-for-module-bootstrap-dist-js-bootstrap

4条答案

按热度按时间

lztngnrs1#

这对我很有效

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

赞(0）回复(0）举报 2022-12-29

hmmo2u0o2#

如果使用bootstrap 5，请尝试安装propperjs

npm install @popperjs/core --save

赞(0）回复(0）举报 2022-12-29

2cmtqfgy3#

这里有几个修复程序似乎对我有用。确保安装了@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"]
       }
     },
     ...
   }

赞(0）回复(0）举报 2022-12-29

wgx48brx4#

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

赞(0）回复(0）举报 2022-12-29