title: dynamically import a React Component if that file exists, otherwise show a default message
body: <p>I want to conditionally import a React Component if the file exists and if not do something else. For example show a default view or message.</p>
  
  <p>I tried this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let Recipe;
  try {
    Recipe = require(`docs/app/Recipes/${props.componentName}`);
  } catch (e) {
    Recipe = () =&gt; &lt;div&gt;Not found&lt;/div&gt;;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>However the linter is complaining that I should not try to dynamicaly require a file, but use a string literal instead.</p>
  
  <p>Is there a cleaner approach to to what I'm trying to achieve?</p>