React DynamicComponent loader (for dynamic import)

react
1

I wrote this quick DynamicComponent for use with React and Meteor’s Dynamic import feature:


export default class DynamicComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {isLoaded: false}
    props.importer().then(m => {
      this.setState({
        isLoaded: true,
        Component: m.default
      })
    })
  }

  render () {
    const {isLoaded, Component} = this.state
    return isLoaded && Component
      ? <Component {...this.props} />
      : <span>Loading...</span>
  }
}
DynamicComponent.propTypes = {
  importer: React.PropTypes.func.isRequired
}

Use like this:

<DynamicComponent {...props} importer={() => import('./MyComponent')} />

The importer property is a bit ugly in use - but I wanted to be able to define the path only once. Originally I tried to use a simple path string, but that had two drawbacks:

  1. It couldn’t take a relative path (because the DynamicComponent definition would have to load from its own location, breaking the linkage)
  2. Meteor wouldn’t bundle the dynamically loaded component, because the compiler requires an intact import('string path') in order to know about the dynamic package, which would require a throwaway function somewhere, which is more ugly.

Anyway, what do you think?

8 Likes
2

Pretty cool idea, I might give it a try. It would be much DRYer than my switch statements

1 Like
3

It needs better error handling, and maybe a way to select a different component than default. maybe also a way to set the loading component in some way. A way to set the className from some combo of the imported module, and the component name might we nice too (for React dev tools, and whatever else uses the component name).

I’m not sure how to do proper error handling in Meteor with React though.

4

I wonder if this would work inside Meteor? https://medium.com/@thejameskyle/react-loadable-2674c59de178#.hikwswlei

5
6

React Loadable is actually a component that leverages dynamic imports. It seems to work perfectly inside Meteor! As per Ben Newman: https://github.com/meteor/meteor/pull/8327#issuecomment-286220281

1 Like
7

React Loadable seems to eat and silence errors from the other side of the import.

8

Do you know if there’s a way to restrict imports based on user-roles ?

9

Any restriction would have to happen on the server side to be effective. That would require hooking into or over-riding whatever methods are there to do the dynamic import. I doubt it’s really set up for that, but I haven’t looked at it at all.