Discussion on: Adding Bootstrap to Next.js

View post

Hi, What we should do in typescript?

useEffect(() => { import('bootstrap/dist/js/bootstrap'); }, []);

has this error

Could not find a declaration file for module 'bootstrap/dist/js/bootstrap'. '/Users/shahryar/Documents/Programming/Docker/Front/mishka-cms-front/node_modules/bootstrap/dist/js/bootstrap.js' implicitly has an 'any' type.
If the 'bootstrap' package actually exposes this module, consider sending a pull request to amend 'github.com/DefinitelyTyped/Definit...

Leonardo Dutra • Sep 18 '22

hey @shahryarjb you need to import useEffect from react in your file

Shahryar Tavakkoli • Sep 18 '22 • Edited

@leorsgomes @anuraggharat
Hi friends, I imported react before, but for fixing this problem based on this post that helped me to fix it

blog.logrocket.com/handling-bootst...

useEffect(() => {
require('bootstrap/dist/js/bootstrap.bundle.min.js');
}, []);

we need to use require instead of import

Anurag Gharat • Sep 18 '22

Hi Shahryar. Can you share your code so that we can understand your issue?

Ondiek Elijah • Dec 4 '22

Hi, I had the same issue and this is how I fixed it in TypeScript and Next.js 13

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import Script from 'next/script'


import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
    <Component {...pageProps} />
    <Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"/>
    </>
  )
}