Dynamic imports in Javascript

Question

I need to dynamically import paths to Assets from an application, for example:

var cliente = clienteX

import ../../caminho/${cliente}/caminho/arquivo.less

It will not be changed at runtime, it would just pull from a configuration file, which client it will pull the Assets, given that the core of the system is the same.

So I researched the import is static, so wanted some help or idea of some workaround for this situation.

Edit 1: Example of structure

• System

• Customers

• client 1

  • css
    • main css.

• client 2

  • css
    • main css.

Example of Imports:

require ('../../Clientes/'+ cliente + '/css/main.css');

import ../../Clientes/${cliente}/css/main.css;

Answer 1

So with Less files I don’t know if this works, but I know that with JS it works

Use like this:

import('./caminho').then(file => file.nomeDaFuncaoExportada()

Then I’d be

If(buttonHasClicksd) import ().then()

Answer 2

You can’t create imports dynamics. As you commented, the import javascript is static, so it does not accept interpolation of strings.

What you can do is use the require.

require ('../../Clientes/'+ cliente + '/css/main.css');

or

require (`../../Clientes/${cliente}/css/main.css`);

They should work. If they don’t work your error should be another one. Can you check if the path is that correct? If you do the same require static with the path of one of the clients it works?

Example:

require (`../../Clientes/cliente1/css/main.css`);

In this case, you can check whether the value of the variable cliente that is correct?

If you cannot statically import, check your compiler configuration (Babel) to check if there is no error in loader.

If it stays wrong, you can post the error log in the terminal?