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

Question

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

Answer 1

Just update to the latest version of redux-form (8.1.0). There is no need to downgrade.

Answer 2

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 [email protected] --save

Answer 3

While the above does work, if you'd like to use the latest, all you need to do is refactor your class component to a function component. Look for the withRef() API. (Please upvote this as the correct answer to help other devs.)

https://redux-form.com/7.1.2/docs/api/fieldarray.md/#props-you-can-pass-to-code-fieldarray-code-

Answer 4

I don't advise downgrading react-redux instead I say you update both libraries to their latest versions and problem should be fixed. Kindly refer to Redux Form documentation on migrating from v6 to v8.

https://redux-form.com/8.2.2/docs/MigrationGuide.md