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 files that changes the module content based on a query string, and I can successfully import a file like this:

import(`src/Main.sass?theme=themename`).then(...do something)

But when the query string is a variable:

const themeQuery = '?theme=themename';
import(`src/Main.sass${themeQuery}`).then(...do something);

or

const theme = 'themename';
import(`src/Main.sass?theme=${theme}`).then(...do something);

I get the error:

Error: Cannot find module '.src/Main.sass?theme=themename'.

I would expect this to work based on the information here:

Fully dynamic statements, such as import(foo), will fail because webpack requires at least some file location information. This is because foo could potentially be any path to any file in your system or project. The import() must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files.

and

Every module that could potentially be requested on an import() call is included. 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 is not a fully dynamic statement and it has the full file path (location information) that can be imported with no problem sans query string.

---

Edit: I've created a test repo where this can be reproduced. src/Main.js imports Main.component.sass with a query string defined by a prop, themeName. When using this component as <Main/> in src/App.js, you can see the Cannot find module './Main.module.sass?theme=themename' error.However, when importing using the full string, including the query, the file is imported with no issue. This can be seen by using src/Main-no-var.js as the <Main> component.

Here is the webpack config used for this example.

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.