1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Problem with InputRange (4.8.3)

mmielko pro asked 5 years ago

I got an error when i tried to add InputRange. My code below: import {InputRange} from "mdbreact"; ... <InputRange min={0} max={100} value={50}></InputRange> Error message below: Uncaught Error: Element ref was specified as a string (input) but no owner was set. This could happen for one of the following reasons: 1. You may be adding a ref to a functional component 2. You may be adding a ref to a component that was not created inside a component's render method 3. You have multiple copies of React loaded See https://fb.me/react-refs-must-have-owner for more information. at invariant (invariant.js?d8db:42) at coerceRef (react-dom.development.js?61bb:11887) at createChild (react-dom.development.js?61bb:12092) at reconcileChildrenArray (react-dom.development.js?61bb:12342) at reconcileChildFibers (react-dom.development.js?61bb:12656) at reconcileChildrenAtExpirationTime (react-dom.development.js?61bb:13016) at reconcileChildren (react-dom.development.js?61bb:13007) at updateHostComponent (react-dom.development.js?61bb:13341) at beginWork (react-dom.development.js?61bb:13829) at performUnitOfWork (react-dom.development.js?61bb:15864) invariant @ invariant.js?d8db:42 coerceRef @ react-dom.development.js?61bb:11887 createChild @ react-dom.development.js?61bb:12092 reconcileChildrenArray @ react-dom.development.js?61bb:12342 reconcileChildFibers @ react-dom.development.js?61bb:12656 reconcileChildrenAtExpirationTime @ react-dom.development.js?61bb:13016 reconcileChildren @ react-dom.development.js?61bb:13007 updateHostComponent @ react-dom.development.js?61bb:13341 beginWork @ react-dom.development.js?61bb:13829 performUnitOfWork @ react-dom.development.js?61bb:15864 workLoop @ react-dom.development.js?61bb:15903 callCallback @ react-dom.development.js?61bb:100 invokeGuardedCallbackDev @ react-dom.development.js?61bb:138 invokeGuardedCallback @ react-dom.development.js?61bb:187 replayUnitOfWork @ react-dom.development.js?61bb:15311 renderRoot @ react-dom.development.js?61bb:15963 performWorkOnRoot @ react-dom.development.js?61bb:16561 performWork @ react-dom.development.js?61bb:16483 performSyncWork @ react-dom.development.js?61bb:16455 requestWork @ react-dom.development.js?61bb:16355 scheduleWork$1 @ react-dom.development.js?61bb:16219 enqueueForceUpdate @ react-dom.development.js?61bb:11337 Component.forceUpdate @ react.development.js?72d0:288 (anonymous) @ react-hot-loader.development.js?c2cb:1664 (anonymous) @ react-hot-loader.development.js?c2cb:1663 setTimeout (async) updateInstances @ react-hot-loader.development.js?c2cb:1657 (anonymous) @ react-hot-loader.development.js?c2cb:1679 hotSetStatus @ bundle.js:219 hotApply @ bundle.js:601 cb @ process-update.js?e135:66 (anonymous) @ process-update.js?e135:82 Promise.then (async) check @ process-update.js?e135:81 module.exports @ process-update.js?e135:42 processMessage @ client.js?f33d:268 handleMessage @ client.js?f33d:136 handleMessage @ client.js?f33d:99 react-dom.development.js?61bb:14227 The above error occurred in the <form> component: in form in t (created by FormMD) in div (created by FormMD) in div (created by FormMD) in form (created by FormMD) in div in t (created by FormMD) in div (created by FormMD) in FormMD (created by Form(FormMD)) in Form(FormMD) (created by Connect(Form(FormMD))) in Connect(Form(FormMD)) (created by ReduxForm) in ReduxForm (created by ReduxFormPage) in ReduxFormPage (created by Connect(ReduxFormPage)) in Connect(ReduxFormPage) (created by Route) in Route (created by App) in Switch (created by App) in div (created by App) in App (created by HotExportedApp) in AppContainer (created by HotExportedApp) in HotExportedApp (created by Root) in Router (created by ConnectedRouter) in ConnectedRouter (created by Connect(ConnectedRouter)) in Connect(ConnectedRouter) (created by Root) in Provider (created by Root) in Root in AppContainer React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.  

Anna Morawska staff answered 5 years ago

Hi mmielko , thank you for reporting this bug. We discovered that it happens because of multiple copies or react library in your project. We'va already fixed this- Please, follow the steps to update your mdbreact version :
1. remove node_modules folder ( and package-lock.json file )
2. in the package.json file replace mdbreact key-value pair with this line
"mdbreact": "git+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/react/re-pro.git#next"
3. run npm install
It should fix this bug. Please let us know if the problem remains
Best,
Ania
 

mmielko pro commented 5 years ago

Your solution works,  however we we decided to use material ui library instead of your library because the library doesn't have full documentation of components (examples are not enough) and still contains many bugs.

Cheers

Michal

Anna Morawska staff commented 5 years ago

We are working right now on improving our documentation, but thank you for your feedback, we appreciate it  :)

Best,

Ania
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
About author
mmielko
Pro User 30Support score
4Questions 1Answers 0Snippets