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

score 27 · Accepted Answer · answered Jan 07 '19 at 16:06

27

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

answered Jan 07 '19 at 16:06

Kolawole

505
5
10

score 15 · Answer 2 · edited Oct 27 '20 at 06:27

15

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

edited Oct 27 '20 at 06:27

codejockie

9,020
4
40
46

answered Dec 08 '18 at 14:33

Yariv Katz

1,353
1
17
24

10

how it this a solution really? – Danish Feb 19 '19 at 20:42

Clayton Ray · Answer 3 · 2021-01-07T22:10:58.667

7

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-

edited Jan 07 '21 at 22:10

answered Dec 09 '18 at 11:49

Clayton Ray

265
2
13

2

Please upvote this answer as the correct answer so that devs don't end up downgrading versions to make it work! – Clayton Ray Dec 11 '18 at 16:29
How do you do that? Could you please edit my fiddle? – Mimo Dec 12 '18 at 03:06
Instead of ```class Something extends React.Component {}```, try ```const Something = (props) => {}``` – Clayton Ray Dec 12 '18 at 23:26
1

@ClaytonRay your last comment is not consistent with your answer. You said `all you need to do is refactor your function component to a class component.` Did you mean refactor from class components to function components? – flash Sep 14 '19 at 16:29
I see the confusion. I don't remember this issue but I'm sure I meant refactor from class to function. Either way, you should be able to use either a class or function component, as refs are available in both. – Clayton Ray Sep 15 '19 at 17:04

score 3 · Answer 4 · answered Aug 13 '19 at 03:09

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

score 1 · Answer 5 · answered May 16 '19 at 07:04

1

https://github.com/reduxjs/react-redux/releases/tag/v6.0.0

The withRef option to connect has been replaced with forwardRef

export default 
  connect(
    mapStateToProps,
    mapDispatchToProps, null, {forwardRef: true})(Component)

answered May 16 '19 at 07:04

Muhammad Numan

23,222
6
63
80

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

5 Answers5