Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 4 years ago
Metronic React Bootstrap 5
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

T
Tamas 4 years ago

That has fixed the issue.

Thanks you!


user
Lauris Stepanovs Author 4 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(