Next.js: Dynamic imports

[rauchg]

We should make it really easy to load modules dynamically.
For example, to only load some code client side:

componentDidMount () {
  import('./something').then(() => {
    // awesomeness!
  })
}

[arunoda]

@rauchg is this for pages or for anything?

[rauchg]

@arunoda anything. Might require whitelisting in config though

[impronunciable]

This already works

[arunoda]

@impronunciable oh really :)

[arunoda]

I got an error. May be we need to bake something more into that.

[impronunciable]

Wow, it works on the dev server but not when build + start 🤔

[arunoda]

@impronunciable May be dev server serves necessary API endpoints. We may need to allow them in the production for exported chunks.

[impronunciable]

that could be

[arunoda]

I think this could be easily doable. May be this is the same functionality as System.import in webpack.

[mxstbr]

Webpack supports this out of the box and it works just like System.import, see https://github.com/webpack/webpack/pull/3413

[impronunciable]

@mxstbr We are using the webpack version but need to adapt our server to allow it

[arunoda]

Notes:

We need to support SSR with dynamic imports too. In that case, let's say user imported the component inside getInitialProps and pass it to the page via props. We need to support that case allow to do SSR.

Since we don't execute getInitialProps in the client for the first time, we need to find a way to pass down the component from the Server to client.

[jesseditson]

Super excited for this to land - is https://github.com/zeit/next.js/compare/import-then getting PR'd any time soon so I can follow along on that thread?

[arunoda]

@jesseditson yes. We are doing a PR soon.

[mtford90]

Excited for this.

I've found that if server-side rendering with firebase you need to use firebase-admin and google-storage which are node libraries. Wouldn't want to load these in the client and so it would be nice to be able to load these dynamically if isServer is true when getInitialProps is called.

[neeraj022]

I was trying to import a client side library (react-leaflet), but was getting errors when this library was getting loaded on the server side for first time page rendering. Making the library to load conditionally was a easy option.
But while conditionally loading the library on the client side, webpack tries to make the bundle again and I get a error for the first load, thereafter it works well.

Any workaround for this for the time being?

Code :

render()
{
  console.log('Render called');
  let map=(<div></div>);

  //ui side check
  if(typeof window !== 'undefined' &&
  window.document && window.document.createElement){
    let reactleaflet=require('react-leaflet');
    let Map=reactleaflet.Map;
    let Marker=reactleaflet.Marker;
    let Popup=reactleaflet.Popup;
    let TileLayer=reactleaflet.TileLayer;
    //const { Map, TileLayer, Marker, Popup }=ReactLeaflet;


    map = (
    <Map center={this.state.centerPosition} zoom={this.state.zoomLevel}>
      <TileLayer
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {this.state.markers.map((marker)=>{
        return (<Marker key={marker.key} position={[marker.position.lat, marker.position.lng]}>
          <Popup>
            <span>{marker.description}</span>
          </Popup>
        </Marker>);
      })}

    </Map>
  );
}


return(map)
}

[frol]

It seems that this issue is resolved in Next.js 3.0, isn't it?

[arunoda]

@frol Yep. Thanks.
See more: https://zeit.co/blog/next3-preview