Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

React bootstrap v5 out of date


Hi,

When trying to use the Tooltip element from react bootstrap, the following console.log error is given:

Popper: modifier "popoverArrowMargins" provided an invalid "fn" property, expected "function" but got "undefined"

I read that the latest update would fix it, but react-bootstrap-v5 doesn't update because of other locked dependencies. What would be the workaround this issue?


T
Tamas 3 years ago
Metronic React Bootstrap 5
2 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

T
Tamas 3 years ago

That has fixed the issue.

Thanks you!


user
Lauris Stepanovs Author3 years ago

Hi,

This error appears since we are still using react-bootstrap-v5 dependency instead of using react-bootstrap, we will include a fix for this issue in the next release.

Now to fix this you can uninstall react-bootstrap-v5 and install react-bootstrap.
Open your command line in the demo folder and run the commands below:

npm uninstall react-bootstrap-v5
npm install react-bootstrap


Then you will need to update all react-bootstrap-v5 component imports globally to react-bootstrap.

Instead of

import {Tooltip} from "react-bootstrap-v5"

use

import {Tooltip} from "react-bootstrap"


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(