0

I am using a bootstrap 5 CDN on next.js but I'm having an error saying "cannot find name bootstrap" Anyone knows how I can implement it ? Im using typescript.

export default function Pop() {
    
  var popoverTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="popover"]')
  );
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  });

  return (
    <button
      type="button"
      className="btn btn-lg btn-danger"
      data-bs-toggle="popover"
      title="Popover title"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
    >
      Click to toggle popover
    </button>
  );
}
Mike Tabag Estonanto
  • 66
  • 6
  • 2
    Next.js won't allow calling bootstrap as it is a module that would be loaded during run time, something like https://stackoverflow.com/a/68683935/3855179. You would need to first check if bootstrap is defined for the build to go through and then in run time it should get automatically picked up by the scripts. The best way would be to use bootstrap module like https://react-bootstrap.github.io/ – Sumit Surana Aug 19 '21 at 07:55
  • Oh. okay. Is it okay or safe to use the beta version of react bootstrap 5? – Mike Tabag Estonanto Aug 19 '21 at 08:18
  • if you are asking for react-bootstrap, then I would suggest waiting for a stable release. But if you think, you can go ahead and create your own components from bootstrap you can directly download bootstrap via npm or yarn https://getbootstrap.com/docs/5.1/getting-started/download/#npm – Sumit Surana Aug 19 '21 at 09:27

0 Answers0