React: How do I import dynamically using if statements?

Question

I'm trying to understand how I can import my favicon based on the current language of the app. I followed the answer of @thecodejack here, but it still returns an error:

'faviconApple' is not defined
'favicon32x32' is not defined
...
What am I doing wrong?

What I've tried

  if(this.state.language === 'nl') {
  import ('./library/imgs/favicon/nl/apple-touch-icon.png')
  .then((faviconApple)) 
  import ('./library/imgs/favicon/nl/favicon-32x32.png')
  .then((favicon32x32)) 
  import ('./library/imgs/favicon/nl/favicon-16x16.png')
  .then((favicon16x16)) 
  import ('./library/imgs/favicon/nl/safari-pinned-tab.svg')
  .then((faviconSafari)) 
  import ('./library/imgs/favicon/nl/favicon.ico')
  .then((favicon)) 
} else if(this.state.language === 'fr') {
  import ('./library/imgs/favicon/fr/apple-touch-icon.png')
  .then((faviconApple)) 
  import ('./library/imgs/favicon/fr/favicon-32x32.png')
  .then((favicon32x32)) 
  import ('./library/imgs/favicon/fr/favicon-16x16.png')
      .then((favicon16x16)) 
  import ('./library/imgs/favicon/fr/safari-pinned-tab.svg')
      .then((faviconSafari)) 
  import ('./library/imgs/favicon/fr/browserconfig.xml')
.then((faviconBrowserconfig)) 
} else if(this.state.language === 'en') {
  import ('./library/imgs/favicon/en/apple-touch-icon.png')
      .then((faviconApple)) 
  import ('./library/imgs/favicon/en/favicon-32x32.png')
      .then((favicon32x32)) 
  import ('./library/imgs/favicon/en/favicon-16x16.png')
      .then((favicon16x16)) 
  import ('./library/imgs/favicon/en/safari-pinned-tab.svg')
      .then((faviconSafari)) 
  import ('./library/imgs/favicon/en/favicon.ico')
      .then((favicon)) 
}

Answer 1

In your code, you don't assign resolved module to anything. This could be the problem. Try

let faviconApple;
if (this.state.language === 'nl') {
  import('./library/imgs/favicon/nl/apple-touch-icon.png')
    .then(favA => { faviconApple = favA; });
}