redux-form: v6 — Can't read the property wrapped of undefined

Upgrade react-hot-reload to v3 and the problem is gone.

PS: This issue is not related to redux-form and no changes should be done to workaround react-hot-loader’s bugs.

@erikras, @steffenmllr, I noticed that if you include a form component on a page when the form is created within the same module, it works just fine. However, if you import the form component from another module, it throws this error.

It got me thinking it could have something to do with the way how babel transforms modules. I tried all syntaxes: default export, named export and module.exports and nevertheless they all worked the same in this case. I tried with the newest versions of all related babel-modules.

However, when I exported an object with a reference to the form component instead, it worked.

works:

export default { test: FormComponent };
...
import FormComponent from 'FormComponent';

<FormComponent.test />

not works:

export default FormComponent;
...
import FormComponent from 'FormComponent';

<FormComponent />

You can try this in the project I created. The .eslintrc should also now be included correctly. Download it from here.

Upgrading to react-hot-loader v3 fixed the issue for me too. Luckily, it was a very easy upgrade by just replacing react-hot to 'react-hot-loader/webpack' in the loaders section.

I have the same issue when importing Form component from another module. I’m using webpack 1.13.1, but unfortunately, normal export - import module cause this error. @nygardk’s workaround works for me. However, it seems quite hacky, especially for big projects. Is there any chance that issue can be fixed in the scope of redux-form?

I find it hard to upgrade my project to react-hot-reload v3, also exporting object with a reference to the form component https://github.com/erikras/redux-form/issues/1010/#issuecomment-221515925 is quite troublesome if lots of form components to include.

Coincidentally, I found the method below work for me. Just need to install additional package of recompose, and compose defaultProps higher order component with reduxForm.

import {compose, defaultProps} from "recompose";

let SimpleForm = (props) => {
    return (
        <form>
            <Field name="firstName" component="input" type="text" placeholder="First Name"/>
        </form>
    );
};

export default compose(
  defaultProps({}), // Passed empty props.
  reduxForm({
    form: "fieldConfig",
  })
)(SimpleForm);

Upgrading to react-hot-loader@3.0.0-beta7 and changing a loader in webpack config from: "react-hot" to "react-hot-loader/webpack" Fixed this for me. Can also confirm the workaround above if migrating to 3.0 hot loader isn’t an option.

webpack.HotModuleReplacementPlugin() is the problem.

so far upgrade react-hot-loader to v3 is the only solution

Alright. I downgraded webpack from version 2.1.0-beta.7 to version 1.13.1 and webpack-dev-server from 2.0.0-beta to 1.14.1, and now the case works that didn’t work earlier. So, it most probably has something to do with the module loading.

To make it work with webpack 2, the workaround currentlyis to export an object with a reference to the form component, instead of the form component itself.

I will try to validate this in a “real” project. Validated: I tested this in a larger “real” project and the error disappeared after I had exported all the forms wrapped in objects. It seems that you will have to do this for all forms and not only to the one that is initially loaded.

@erikras, I was able to track down the problem. It appears that if a redux-form-connected component is a “page” component used directly with react-router, it causes this error.

Download example project