Replacing components in a Webpack bundle


(Joost) #1

We have a Webpack bundle exposing React components. The exposed components contain nested components from the same bundle.
We want to allow users to replace components with their own specific version.

For example, the following component structure;

class A extends React.Component {
    render() {
        return (
            <B/>
        );
    }
}

const C = require('./C');

class B extends React.Component {
    render() {
        return (
            <C/>
        );
    }
}

from which the top-level component A is exposed in the Webpack bundle:

const A = bundle.components.A;

Our server-side web framework relies on the exposed bundle interface to invoke the React components.

From this structure, an example use-case would be to replace the nested component C from component A.

Current options that we see for this are;

  • add a method to the class B (and A) to replace component C
  • create a registration mechanism, e.g. by using the filename or logical name of C, and a generic method to the bundle to replace a component. For example:
bundle.component.replace('./C', './custom-C');

What would be the best way, i.e. common practice, to replace a (nested) component in a Webpack bundle?