Next.js: Element ref behavior differs in development and production for initial render with new CSS support

[chemicalkosek]

Bug report

Describe the bug

After updating to [email protected] 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.

System information

• OS: Ubuntu 18.04.3
• Browser: Firefox, Chrome
• Version of Next.js: 9.2

[JarrodMFlesch]

Haha! I was literally just going to create this issue!

Here are two sandbox links to show the reproducible issue.

Does not work 9.2.0
Does work 9.1.7

[jacobsfletch]

I experience these same breaking changes when toggling between 9.1.7 to 9.2.0. Server-side refs seem to be absent in dev.

[ijjk]

@JarrodMFlesch it looks like the reproduction you showed is due to the new CSS support since in development when the page is first loaded we add a body{display:none} style tag to the head which is removed after the styles are applied.

Disabling experimental css with experimental: { css: false } in next.config.js returns to the previous ref behavior in development mode. We will need to investigate this some more since refs behaving differently between production and development isn't ideal

[ijjk]

This should be resolved with #10164 and available in Next.js >= v9.2.1-canary.4

[JarrodMFlesch]

This should be resolved with #10164 and available in Next.js >= v9.2.1-canary.4

You guys rock.