Client-Only Module Missing After Hot Reload

[dcalhoun]

Applying the proposed solutions for client-only modules works for initial render, but any hot reload causes the client-only module to go become undefined.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Client-only modules re-render after a change is made to a relevant source file.

Current Behavior

Client-only modules disappear from the rendered tree (potentially throwing an error); as the module is undefined.

Steps to Reproduce (for bugs)

1. Render a React component (parent) that relies on an client-only module (child). (example below)
2. Make a change to to the parent.

Context

I desire to server-render my Next.js application, sans components that require client technology (e.g. a component for a YouTube video player is not server-renderable). I also desire to hot reload changes to components while working in my development environment.

Your Environment

Tech	Version
next	4.2.3
node	8.9.4
OS	macOS 10.13.3
browser	Chrome 64.0.3282.140

Example

import React, { Component } from 'react';

let YouTube;

export default class VideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = { renderYouTube: false };
  }

  // cDM is not invoked during a hot reload; which means YouTube is undefined
  // on any subsequent render.
  componentDidMount() {
    YouTube = require('react-youtube').default;
    this.setState({ renderYouTube: true });
  }

  render() {
    return (
      <div>
        {this.state.renderYouTube && <YouTube videoId={this.props.id} />}
      </div>
    );
  }
}

[arunoda]

@dcalhoun That's the nature of hot-reload. It won't run componentDidMount again. That's the whole point.

You should not assign react-youtube into a page level variable. Instead do this in the render function.

render() {
  if { renderYouTube } = this.state
  if (renderYouTube) {
    return (<YouTube videoId={this.props.id} />)
  }

  return (<div/>)
}

[dcalhoun]

@arunoda thank you for the swift feedback. componentDidMount not running a subsequent time makes sense, if that is the core principle of how hot-reloading works. If supporting hot-reloading for client-only modules is just not possible, that's fine. I do want to make sure I am not missing something from your example though...

I do not follow the point you are attempting to make in the example you provided. From what I gather, the only change you made was destructuring renderYouTube from my component's state.

I am assigning react-youtube to a page level variable, as that is what was proposed in the example solutions I referenced previously. I did attempt to store the react-youtube module in state (not sure this is a good idea in general), but that did not persist through a hot-reload either.

Thanks!