Server-side rendering is crashing with react-inform

[dzek69]

I am using 1.2.4-beta.1

When I am using react-inform and nerv-server - it crashes the render.

state.values seems to be undefined, so values[name] is crashing in this file: https://github.com/theadam/react-inform/blob/master/src/form.js

However when I render this in browser - everything is working as expected.

I'm not using anything fancy with react-inform so you should be able to reproduce this with basic example, but if not - I may try to isolate the issue out of my project and make a repo out of it.

[yuche]

That’s a really good catch.

react-inform is  calling setState in componentWillMount, In Nerv (and React) setState is a asynchronous function, so when the component.render() function is calling, component.state haven’t updated yet which cause crash.

The solution is simple: just clear the queueing state and merge them after componentWillMount was called during the server rendering.

Please re-install Nerv by running npm install nervjs@beta (1.2.5-beta.1) and try again.

It looks like my email client was broken , I thought this issue was replied two days ago but did not actually. 😂

[dzek69]

Thank for your reply, however the issue still persists.

[yuche]

Here is basic example in react-inform's README.md, and it's works fine with me in Node 9.0.0:

require("module-alias/register");

var _extends =
  Object.assign ||
  function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

const { Component, createElement, render } = require("nervjs");
const { form } = require("react-inform");
const { renderToString } = require("nerv-server");

const fields = ["username", "password", "confirmPassword"];

const validate = values => {
  const { username, password, confirmPassword } = values;
  const errors = {};

  if (!username) errors.username = "Username is required!";
  if (!password) errors.password = "Password is required!";
  if (confirmPassword !== password)
    errors.confirmPassword = "Passwords must match!";

  return errors;
};

class MyForm extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      message: undefined,
      error: undefined
    };
  }

  handleSubmit(e) {
    e.preventDefault();
    const { form } = this.props;
    form.forceValidate();

    if (form.isValid()) {
      this.setState({ message: "Success!", error: undefined });
    } else {
      this.setState({
        error: "Please correct the errors.",
        message: undefined
      });
    }
  }

  render() {
    const { username, password, confirmPassword } = this.props.fields;
    // console.log(this.props);

    return createElement(
      "form",
      { onSubmit: e => this.handleSubmit(e) },
      createElement("h3", null, "My Form"),
      createElement("h4", { className: "error" }, this.state.error),
      createElement("h4", { className: "message" }, this.state.message),
      createElement(
        "input",
        _extends({ type: "text", placeholder: "Username" }, username.props)
      ),
      createElement("span", null, username.error),
      createElement(
        "input",
        _extends({ type: "password", placeholder: "Password" }, password.props)
      ),
      createElement("span", null, password.error),
      createElement(
        "input",
        _extends(
          { type: "password", placeholder: "Confirm Password" },
          confirmPassword.props
        )
      ),
      createElement("span", null, confirmPassword.error),
      createElement("input", { type: "submit", value: "submit" })
    );
  }
}

const App = form({ fields, validate })(MyForm);
const app = createElement(App);

console.log(renderToString(app));

In package.json using module-alias (we need alias react-dom and react to nervjs in server rendering as well, you can also do that in webpack) :

  "_moduleAliases": {
    "react-dom": "./node_modules/nervjs",
    "react": "./node_modules/nervjs"
  }

If the code still crash, check the node_modules/nerv-server/dist/index.js line 317:

Is there instance.state = instance.getState() present?

[dzek69]

Hm, when installed by yarn - the change wasn't there, but package.json version number was 1.2.5-beta.1 and resolved to: https://registry.yarnpkg.com/nerv-server/-/nerv-server-1.2.5-beta.1.tgz which should be a proxy for https://registry.npmjs.org/nerv-server/-/nerv-server-1.2.5-beta.1.tgz and I've manually downloaded it and it wasn't there.

I reinstalled deps using npm and it was there.

I cleaned yarn lock and node_modules and reinstalled with yarn and it resolved to 1.2.5-beta.2 and the change is there.

So I guess you've released wrong version and updated it in the meantime, right?

Anyway - this fixed the problem! 🎉

[yuche]

Just checking my git log

I was published 1.2.5-beta.1 after fixing the bug. However, the change did not publish. 😂
Maybe I forget to build the file before publishing……（publishing by running lerna publish directly）

[dzek69]

add prepublishOnly hook :)
https://docs.npmjs.com/misc/scripts