Template literals on dynamic imports

Hi, Is it possible to use a template literal for dynamic imports? I’d like to import a component based on a condition. For example: const DynamicComponent = dynamic(import(…/components/${operation}))

[sergiodxa]

Due to how webpack handle code splitting it’s not possible, that’s because the bundles are statically generated, not dynamically at runtime, but you can create a map of dynamic imports with every possible case and use it based on a condition.

const Components = {
  Red: dynamic(import('../components/red.js')),
  Blue: dynamic(import('../components/blue.js')),
}

export default ({ color }) => {
  const Component = Components[color]
  return <Component />
}

[luisherranz]

@OutThisLife they are not.

It works this way: imagine you have three files (works for folders too): /components/hello1.js /components/hello2.js /components/hello3.js and you use this code to dynamically import any of those: const DynamicComponent = dynamic(import(./components/${name}))

Webpack will go to the /components folder and will analyze the files (or folders) there, creating three separate bundles, for example: --components-hello1.js --components-hello2.js --components-hello3.js then, on runtime, it will import the proper bundle if name matches either hello1, hello2 and hello3.