React ref doesn't work with dynamically imported components

[brandones]

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

Expected Behavior

When creating a callback reference to a dynamically imported component, the reference should resolve to the component as if it had been imported normally.

Current Behavior

The ref behaves strangely. The reference to the component doesn't seem to have any of the attributes or state of the component -- all undefined.

Steps to Reproduce (for bugs)

Here's a nice smallish example. Bring your own boilerplate components/page.js

pages/refs.js

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 = () => {
    console.log(this.child.state.value)  // undefined
    console.log(this.child.getValue())  // throws
  }

  render() {
    return (
      <div>
        <Child ref={ (child) => { this.child = child } } />
        <button onClick={ this.onSubmit }>Submit</button>
      </div>
    )
  }
}

export default class extends Page {
  render() {
    return <Parent />
  }
}

components/child.js

import React, { Component } from 'react'

export default class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 23
    }
    this.getValue = () => String(this.state.value)
  }
  render() { return <div>{this.state.value}</div> }
}

Context

I'm trying to create a wrapper around a wrapper around React-RTE. The first layer wrapper has a getValue() 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).

Your Environment

Tech	Version
next	3.0.6
node	6.9.1
OS	macOS 10.12.6
browser	Chrome 60.0.3112.90 (Official Build) (64-bit)

[pencilcheck]

The component imported is actually all instances of "DynamicComponent" for me, thus all refs are not working.

[jsvde]

Dynamically imported Components are wrapped in a DynamicComponent. Since React does not allow forwarding ref maybe you could substitute ref for innerRef like styled-components[#102]

[timneutkens]

There's a new API coming in future React that allows to pass off ref.

[ritz078]

Any hack for now?

[paschaldev]

Seriously need a hack

[zhongyuanjia]

I use this to get ref

class Example extends React.Component {
  constructor() {
    this.state = {
      DynamicComponent: null,
    };
    this.refCom = React.createRef();
  }

  render() {
    const {DynamicComponent} = this.state;
    return DynamicComponent && <DynamicComponent ref={this.refCom}/>
  }

  componentDidMount() {
    import("my-dynamic-component")
      // if your component use export default, use val.default,
     // else use val[yourComponentName]
    .then(val => this.setState({DynamicComponent: val.default}));
  } 
}