Conditional component import in react application

Question

I'm using fetch-mock to mock the actual component which uses fetch. fetch-mock doesn't support ie11 and would like to import the example component only if the browser is supported. How can i achieve that ?

1. ABCExampleComponent uses fetch-mock for mocking fetch used in ABCComponent.
2. LoadComponent should render ABCExampleComponent only if the browser is supported.

LoadComponent

const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(!isIE11){
  import ABCExampleComponent from './ABCExampleComponent';
}

//or
const ABCExampleComponent = !isIE11 ? import('./ABCExampleComponent') : null;

const LoadComponent = ( ) => {
  <ABCExampleComponent />
}

Thanks for the suggestions.

Answer 1

I dont know if I fully understand your question, but try this const Abc = condition ? require('ComponentA') : require('componentB')