Dynamically Importing Components with React.lazy

[kocendavid]

Hi in your article you mentioned

One workaround is to re-export those modules as default exports from an intermediate module.

How would that look like? Thanks!

[AleksandrHovhannisyan]

@kocendavid Oh, I should probably link to the React docs in my article. Here's the relevant bit: https://reactjs.org/docs/code-splitting.html#named-exports

[ianfeldberg]

@AleksandrHovhannisyan great article! I am trying to get something similar working except I need to dynamically load a React component from an npm package that I won't know until runtime. I have a component that draws a simple frame with some controls on it and is in package A. What I want to do is - at runtime - load up all the React components in packages B, C, and D and drop them in the frame. Is there any way of dynamically loading a React component unless it's been npm imported into package A ahead of time?

Think Java interfaces. I can define an interface and put it in one jar file and then implement that interface and stick it in another jar file. At runtime, as long as both JAR files are on the classpath, it all works great. Is there anything in the JS/React world that works that way?

[AleksandrHovhannisyan]

@ianfeldberg Unfortunately, I can't really say without seeing some sample code. Note that you can lazily import both internal modules and npm modules.