Refs with Next Dynamic Imports do not work

[lanc33llis]

The current work around to use this library in Next is use to dynamic imports, but dynamic imports breaks ref functionality. The workaround in Next is use to a wrapper class (see below for example) but this doesn't work with this library. This seems to be because of a mix of both CJS and ES module dependencies (see build error). A possible solution from #352 is to add "type: "module"" to the package.json.

Wrapper class for ForceGraph

import ForceGraph2D from 'react-force-graph-2d'

const WrappedForceGraph = ({fgRef, ...props}) => {
  return <ForceGraph2D {...props} ref={fgRef}></ForceGraph2D>
}

export default WrappedForceGraph

index.js

const ForceGraph = dynamic(() => import('./components/ForceGraph'), { ssr: false })

const ForceGraph2D = forwardRef((props, ref) => (<ForceGraph {...props} fgRef={ref}/>))
ForceGraph2D.displayName = 'ForceGraph2D'

Build error: Error [ERR_REQUIRE_ESM]: require() of ES Module \node_modules\d3-selection\src\index.js from \node_modules\force-graph\dist\force-graph.common.js not supported.

The above code does work in development but Next will not build.

[kvietcong]

I had a very similar problem and issue #324 helped me get around it.