Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Element ref behavior differs in development and production for initial render with new CSS support

See original GitHub issue

Bug report

Describe the bug

After updating to next@9.2 it seems that the refs are not being created during server-side render in development mode. Everything works fine after building to production, also everything works fine when mounting that component client-side. Also, everything works fine pre 9.2. Disclaimer: I may be wrong with my conclusion of what is really the cause of the bug. It may as well be with how I am rendering those components.

To Reproduce

My code: (this is yet to be refactored to hooks).

class ScheduleComponent extends React.Component {
  schedule = React.createRef();

  state = {
    visibility: 'hidden',
    width: 1240,
    leftBond: moment()
      .subtract(7, 'days')
      .startOf('day'),
    rightBond: moment()
      .add(23, 'days')
      .startOf('day'),
  };

  componentDidMount() {
    this.setState({
      width: this.schedule.current.scrollWidth,
      visibility: 'visible',
    });
    window.addEventListener('resize', this.resize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  resize = () => {
    this.setState({ width: this.schedule.current.scrollWidth });
  };

Expected behavior

Refs should be created during server-side render in dev mode.

Screenshots

What’s happening during server-side render. The elements with month names and year should be already rendered. They render only in production or during client-side mounting or after firing the resize function as you can see on the gif.

Peek 2020-01-19 19-33