React-redux-form: Doesn't work in production mode with material-ui

[ffxsam]

Per #147, react-redux-form is still not working in production in conjunction with material-ui. Just wanted to open a new issue on this and leave it open until there's a resolution.

Any progress BTW? I'm on the latest version.

[davidkpiano]

Are you manually adding TextField.displayName = 'TextField'? That's the current workaround.

[ffxsam]

Where would I do that? This is my code:

            <MUITextField model="insightModel.title">
              <TextField
                floatingLabelText="Title"
                errorText={getError(fields, 'title')}
              />
            </MUITextField>

Should I just do:

const MyTextField = TextField;
MyTextField.displayName = 'TextField';

And then use <MyTextField>?

[davidkpiano]

Right, or you can actually do it directly on TextField itself, since it's setting a static property.

[ffxsam]

I'll give it a shot. Isn't the fix for this as simple as modifying this code:

    let controlDisplayName = control.constructor.displayName
      || control.type.displayName
      || control.type.name
      || control.type;

to be:

    let controlDisplayName = control.constructor.displayName
      || control.constructor.name
      || control.type.displayName
      || control.type.name
      || control.type;

[davidkpiano]

Ah, I said I'd do that. Issuing a quick patch with that right now.

[ffxsam]

Ok just curious :) I'd be happy to do a PR as well.

[ffxsam]

Sorry.. getting a lot of pressure from higher up to get this into production. I know this is free/open source so I don't have any expectations (some people get really rude about it), and I'm happy to contribute a fix too. But I'd just need you to publish to npm since I don't have that ability.

I haven't yet figured out the best way for npm to pull from a GitHub fork yet, otherwise I would've done that.

[mdgbayly]

I haven't yet figured out the best way for npm to pull from a GitHub fork yet, otherwise I would've done that.

I do that by publishing the fork to npm using a scoped package name.
https://discuss.reactjs.org/t/best-way-to-include-a-react-fork-in-my-project/313/2

Incidentally, depending on what build tools you use, you can also use the browser field in your package.json to avoid having to rewrite all your requires/imports. e.g.

  "browser": {
    "react-maskedinput": "@mdgbayly/react-maskedinput",
    "react-textarea-autosize": "@mdgbayly/react-textarea-autosize"
  },

[davidkpiano]

@ffxsam I currently have this:

    let controlDisplayName = control.constructor.displayName
      || control.type.displayName
      || control.type.name
      || control.type
+      || control.constructor.name;

not sure if that was what you were expecting. Placing it as the second clause causes a _lot_ of unit tests to fail, though.

Feel free to PR; I can review it ASAP.

By the way, you can definitely fork it and then just specify the dependency as the link to the git URL.

[ffxsam]

I've got a fork of this exact code change, lemme test it out in production and I'll let you know how it goes.

[ffxsam]

Man, it doesn't work. I don't get it. I'll have to settle for the TextField.displayName = 'TextField' workaround for now.

[davidkpiano]

Yeah, those properties are probably just getting minified in production. V1 syntax will make this a lot easier:

import { Control } from 'react-redux-form';

// render()
// ... can be inside <Field> or not
<Control model="foo.bar" component={TextField} label="foo bar" />

[ffxsam]

Cool. I'll hang with the workaround till 1.0 then. Thanks for all your hard work!