Issue 1:
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)

Render a React component (parent) that relies on an client-only module (child). (example below)

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>
);
}
}

Issue 2:
It is in my understanding that the <style jsx> tag contains an interpolated string in order allow insertion of variables that can be stored and manipulated in javascript as in the following example:

const color = 'red';

return (<div>
<p>Hello</p>
<style jsx>
{`
p {
color: ${color};
}
`}
</style>
</div>);

I am trying to use the previous mechanism to encapsulate the media queries that I use in a single location:

const mediaQueries = {
mobile: '@ media screen and (max-width: 320 px)',
...
};

But when I try to use them as follows:

return (<div>
<p>Hello</p>
<style jsx>
{`
${mediaQueries.mobile} {
p {
color: ${color};
}
}
`}
</style>
</div>);

I get the following error:

Module build failed: Error: /absolute_path/MediaQueryIssueExample/pages/index.js?entry: Nesting detected at 9:21. Unfortunately nesting is not supported by styled-jsx.
at Function.disableNestingPlugin (/absolute_path/MediaQueryIssueExample/node_modules/styled-jsx/dist/lib/style-transform.js:22:13)
at proxy (/absolute_path/MediaQueryIssueExample/node_modules/stylis/stylis.js:1311:30)
at compile (/absolute_path/MediaQueryIssueExample/node_modules/stylis/stylis.js:804:14)
at compile (/absolute_path/MediaQueryIssueExample/node_modules/stylis/stylis.js:366:17)
at compile (/absolute_path/MediaQueryIssueExample/node_modules/stylis/stylis.js:366:17)
at stylis (/absolute_path/MediaQueryIssueExample/node_modules/stylis/stylis.js:1458:16)
at transform (/absolute_path/MediaQueryIssueExample/node_modules/styled-jsx/dist/lib/style-transform.js:120:3)
at processCss (/absolute_path/MediaQueryIssueExample/node_modules/styled-jsx/dist/_utils.js:461:65)
at PluginPass.exit (/absolute_path/MediaQueryIssueExample/node_modules/styled-jsx/dist/babel.js:232:51)
at newFn (/absolute_path/MediaQueryIssueExample/node_modules/babel-traverse/lib/visitors.js:276:21)

The MediaQueryIssue repository contains a minimalistic example that demonstrates the issue.

The error message indicates that nested styling as been detected, this seems odd since I did use only one <style jsx> elements inside the rendered structure of the previous example.

One of the advantages of using styled jsx is the ability to substitute values that can be manipulated in JavaScript in order to kill as much duplication as possible, unfortunately the fact that it is impossible to substitute media queries limits this advantage greatly.

I suspect that this might be a styled jsx specific issue but I am not sure yet and I thought it would better to start the discussion here.

Pointers to where to debug are welcome and I would be glad to contribute fixes if possible.