Dynamic imports in Javascript

Asked

Viewed 599 times

1

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;

  • 1

    Have you tried using the require? If you’re using the babel, it has support for the require in the browser. Example: https://github.com/pedrolaxe/js-terminal/blob/master/src/js/terminal/commands/index.js#L20

  • @Gabrielkatakura I tried too and did not roll very well :/

  • You can try using the path.resolve combined with the __dirname, gives an example of the directory structure to be clearer

  • @Sergio updated the question there

  • The examples you posed was what you tried and didn’t work?

  • @Sergio that there

Show 1 more comment

2 answers

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()
  • 1

    Please add more details to expand your response, such as a working code or documentation quotes.

1

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?

  • I tried with require, but the same didn’t work. It doesn’t return error, it just doesn’t matter. I did the require by passing the path of one of the clients and it works. then I passed the client name to a variable and passed it and it didn’t matter :/

  • Can you confirm that it really doesn’t matter? Put a body { background: #000 !important; } in the imported style only to validate that it really is not being imported. Did the importing test without the variable with the cliente1 in place? If you keep giving error, can you import any other css file into the project? To validate that it is not a problem with the Upload.

  • Yes, I import by passing the direct client name it matters and changes the css, if I pass it as variable it doesn’t even matter.

  • Can give a console.log variable? To verify that its value is as expected?

  • returns the string of the same client hahaha. It seems that only the fact of having something "variable" in the path causes it not to be imported

Browser other questions tagged

You are not signed in. Login or sign up in order to post.