Error withRef is removed. To access the wrapped instance, use a ref on the connected component when using Redux Form

  • A+
Category:Languages

I am trying to get Redux Form to work for the first time and I am getting the following error:

Invariant Violation withRef is removed. To access the wrapped instance, use a ref on the connected component.

What am I doing wrong? The error is thrown as soon as I write (copy/paste from the example) the store.

Here is the code.

import React from "react"; import ReactDOM from "react-dom"; import { createStore, combineReducers } from 'redux' import { reducer as formReducer } from 'redux-form'  const rootReducer = combineReducers({   form: formReducer })  const store = createStore(rootReducer);   function App() {   return (     <div className="App">       <h1>Hello CodeSandbox</h1>       <h2>Start editing to see some magic happen!</h2>     </div>   ); }  const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

I have also made a code sandbox that shows the issue: https://codesandbox.io/s/07xzolv60

 


I had the same problem. Apparently redux-form doesn't work well yet with react-redux version greater then 6.

For me what helped is downgrading the react-redux package to version 5

npm install react-redux@5.1.1 --save 

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: