How to use a webpack dynamic import with a variable query string?

Question

Using webpack 3 and react, I can import a file like this:

import(`src/Main.sass`).then(...do something)

I have a loader for the imported fi

Answer 1

If you look at this part of documentation

For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

This means that static analysis will search for every .json file within ./locale/ folder and bundle it, meaning it'll know every possible target. With query string you'll have basically infinite number of possible targets because query string could be anything and therefore won't be able to know what to bundle.

I guess this is just entirely different functionality from dynamic path resolution which obviously is not supported in the current import() statement.

Your best bet is to change folder structure to have multiple .css files for each theme and then load it using dynamic path as suggested in documentation (language example) or you could do something like this

const themes = {
  "themename": () => import(
    `./Main.module.css?theme=themename`
  ),
  // other themes
}

This way you'd have cleaner code showing all possible themes that can be passed to prop (static analysis would know exactly what the query string is, so it will work) and then you'd use it like so

componentDidMount = () => {
    const { themeName } = this.props
    themes[themeName]().then((result) => {
      this.setState({ theme: result })
    })
}

I'd rather have the query string implementation as you've suggested but for now, as far as I've investigated, it's not possible.

Answer 2

I've just discovered this article, and it states that Webpack has "loading strategies".

At first I thought the comment in the example below was innocuous, but no, it's precisely what sets Webpack's loading strategy.

import(/* webpackMode: "eager" */ `assets/images/${imageName}.jpg`)

There are four different methods (lazy, lazy-once, eager, weak). You can take a look into the descriptions in more detail here.

All credits to the author of the article.

Use case

I needed to import a localized version of FirebaseUI in Quasar (a great Vue.js framework), so instead of using import, which fails with dynamic strings, forcing me to hardcode the language desired:

import * as firebaseui from 'firebaseui/dist/npm__it'

I now use:

import (/* webpackMode: "eager" */ `firebaseui/dist/npm__${appLanguage}`)

It allows me to evaluate the languate before the import statement, either by the detecting it in the browser, or by parsing the URL for the language query term.