Formik: server side render not work

[weishiji]

when i use withFormik higher-order function, server side render not work, it can not generate html string.

[jaredpalmer]

Can you please fill out a bug report template and provide some example code. Server rendering is supported. Formik does nothing with window so it’s likely another thing causing your issue

[weishiji]

.
├── AskForm.jsx
├── BidForm.jsx
└── index.jsx

// in my index.jsx file
class TradeForm extends Component {
  componentDidMount() {
  }

  render() {
    const {
      classes,
      t,
    } = this.props;

    return (
      <Container
        className={classNames(css.message, classes.root)}
      >
        <div className={classNames(css['message-header'], classes.header)}>
          Limit Order
        </div>
        <Container className={classes.formBox}>
          <BidForm />
          <AskForm />
        </Container>
      </Container>
    );
  }
}```
```javascript
// in my AskForm.jsx file
...
render(){
 <form
     autoComplete='off'
     onSubmit={handleSubmit}
   >
     <div className={classNames(css.field, css['has-addons'])}>
            <p className={classNames(css.control)}>
              <a className={classNames(css.button, css['is-static'], classes.label)}>
                Price
              </a>
            </p>
            <div className={classNames(css.control, css['has-icons-right'], css['is-expanded'])}>
              <p className={classNames(css.control, css['has-icons-right'])}>
                <input
                  type='text'
                  name='price'
                  className={classNames(css.input, classes.myInput)}
                  onChange={this.handlePriceChange}
                  value={values.price}
                />
              </p>
            </div>
          </div>
.......
   </form>
}
const formikForm = {
  mapPropsToValues: ({ visibleProduct, bidPrice }) => ({
    side: 'sell',
    market: visibleProduct.get('id'),
    price: bidPrice,
  }),
  handleSubmit: (values, formikBag) => {
    const { props: { createOrder } } = formikBag;
    createOrder(values, formikBag);
    console.log(values, 'this is ask form');

    // login(values, formikBag);
  },
  displayName: 'askForm',
};
const formikComponent = withNamespaces('askForm')(withFormik(formikForm)(AskForm));
const mapStateToProps = state => ({
......
  balance: state.getIn(['account', 'balance']),
  bidPrice: state.getIn(['account', 'orderForm', 'bidPrice']),
});
const mapDispathToProps = {
  createOrder: AccountAction.OrderForm.create,
};

export default connect(
  mapStateToProps,
  mapDispathToProps,
)(injectSheet(styles)(formikComponent));

when i remove the withFormik higher-order function, the server side render can work

[jaredpalmer]

Nothing there looks wrong. There is nothing in Formik that would would break SSR. If I had to guess maybe your styles are not properly setup on your server or there is another bug. Closing for now.

[jaredpalmer]

I would remove all your styles and see if it renders

[weishiji]

I remove react-i18next withNamespaces higher-order function and it work, may be something wrong with my react-118next config. thanks!!! but my other components are ok,
very strange.

[filipsuk]

I remove react-i18next withNamespaces higher-order function and it work, may be something wrong with my react-118next config. thanks!!! but my other components are ok,
very strange.

@weishiji have you found a solution how to use it with react-i18next?