<p dir="auto">The <a href="https://github.com/zeit/next.js/commit/6e44cdef5f877a85d9015002d3f77640c0e1ba21#diff-0f2f34c098f5954f99483c9bd61e439dR46">recently added config option</a> for adding a custom bootstrap file to the main bundle is mentioned only in comments here and there so far, so thought to turn this into an actual task for clarity.</p>
<p dir="auto">References:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="259490610" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2969" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2969/hovercard?comment_id=348158039&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/2969#issuecomment-348158039">#2969 (comment)</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="217887254" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/1556" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/1556/hovercard?comment_id=346933034&amp;comment_type=issue_comment" href="https://github.com/vercel/next.js/issues/1556#issuecomment-346933034">#1556 (comment)</a></li>
</ul>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">I'd expect to</p>
<ul dir="auto">
<li>find <code class="notranslate">config.clientBootstrap</code> documented in main README</li>
<li>find an example showing how to use this (suggestion: use something common like babel-polyfill in the example to help issues such as <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="240585724" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2468" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2468/hovercard" href="https://github.com/vercel/next.js/issues/2468">#2468</a>)</li>
</ul>
<p dir="auto">As a side note, it seems that there are no tests exercising this config option, but perhaps that can be seen as a different task than these docs.</p>
<h2 dir="auto">Notes</h2>
<p dir="auto">Something to be aware of with this config (and the docs): sadly this option does not help with everything. I tried to add EventSource polyfill for webpack-hot-middleware to make the dev mode work in IE11, but this custom bootstrap is injected too late and thus it does not help with this kind of polyfilling.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">When creating a <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html" rel="nofollow">callback reference</a> to a dynamically imported component, the reference should resolve to the component as if it had been imported normally.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">The ref behaves strangely. The reference to the component doesn't seem to have any of the attributes or state of the component -- all <code class="notranslate">undefined</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Here's a nice smallish example. Bring your own boilerplate <code class="notranslate">components/page.js</code></p>
<p dir="auto"><code class="notranslate">pages/refs.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'
import dynamic from 'next/dynamic'
import Page from '../components/page'

const Child = dynamic(
  import('../components/child')
)

class Parent extends Component {

  onSubmit = () =&gt; {
    console.log(this.child.state.value)  // undefined
    console.log(this.child.getValue())  // throws
  }

  render() {
    return (
      &lt;div&gt;
        &lt;Child ref={ (child) =&gt; { this.child = child } } /&gt;
        &lt;button onClick={ this.onSubmit }&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    )
  }
}

export default class extends Page {
  render() {
    return &lt;Parent /&gt;
  }
}"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react'
import dynamic from 'next/dynamic'
import Page from '../components/page'

const Child = dynamic(
  import('../components/child')
)

class Parent extends Component {

  onSubmit = () =&gt; {
    console.log(this.child.state.value)  // undefined
    console.log(this.child.getValue())  // throws
  }

  render() {
    return (
      &lt;div&gt;
        &lt;Child ref={ (child) =&gt; { this.child = child } } /&gt;
        &lt;button onClick={ this.onSubmit }&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    )
  }
}

export default class extends Page {
  render() {
    return &lt;Parent /&gt;
  }
}
</code></pre></div>
<p dir="auto"><code class="notranslate">components/child.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'

export default class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 23
    }
    this.getValue = () =&gt; String(this.state.value)
  }
  render() { return &lt;div&gt;{this.state.value}&lt;/div&gt; }
}"><pre class="notranslate"><code class="notranslate">import React, { Component } from 'react'

export default class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 23
    }
    this.getValue = () =&gt; String(this.state.value)
  }
  render() { return &lt;div&gt;{this.state.value}&lt;/div&gt; }
}
</code></pre></div>
<h2 dir="auto">Context</h2>


<p dir="auto">I'm trying to create a wrapper around a wrapper around React-RTE. The first layer wrapper has a <code class="notranslate">getValue()</code> method one can use to extract the transformed value from React-RTE. The transformation is non-trivial and kind of expensive, so it makes sense to do it on-demand, and the component that should demand it is in the second-layer component. The first layer wrapper needs to be loaded dynamically (with SSR disabled).</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.0.6</td>
</tr>
<tr>
<td>node</td>
<td>6.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60.0.3112.90 (Official Build) (64-bit)</td>
</tr>
</tbody>
</table>