Реактивный динамический импорт не принимает строковую переменную

Question

У меня есть компонент, который позволяет мне динамически импортировать изображения в режиме реакции.Это компонент, который я использую:

import React from "react";
import PropTypes from "prop-types";

// Lazily load an iamge
class LazyImageLoader extends React.Component {
    constructor() {
        super();
        this.state = {
            module: null,
        };
    }

    async componentDidMount() {
        try {
            const { resolve } = this.props;
            const { default: module } = await resolve();
            this.setState({ module });
        } catch (error) {
            this.setState({ hasError: error });
        }
    }

    componentDidCatch(error) {
        this.setState({ hasError: error });
    }

    render() {
        const { module, hasError } = this.state;

        if (hasError) return <div>{hasError.message}</div>;
        if (!module) return <div>Loading module...</div>;

        if (module) return <img src={module} alt="Logo" />;

        return <div>Module loaded</div>;
    }
}

LazyImageLoader.propTypes = {
    resolve: PropTypes.func.isRequired,
};

export default LazyImageLoader;

Теперь, если я попытаюсь использовать этот компонент таким образом со строкой к изображению, которое должно быть импортировано, он прекрасно работает:

<LazyImageLoader resolve={() => import("assets/images/os/netboot.svg")} />

Но как только я извлекаю URL в отдельную переменную, он больше не работает, и я получаю сообщение об ошибке «не могу найти модуль ...»:

const path = "assets/images/os/netboot.svg";
<LazyImageLoader resolve={() => import(path)} />

Есть ли способ использовать переменныедля динамического импорта?

Answer 1

Использование переменной не работает напрямую, но может использоваться следующим образом -

const path = './test.jpg';
import(`${path}`);

Answer 2

Согласно ответу в:

Динамический импорт в ES6 с переменными времени выполнения

"Правила для import () для спецификации не совпадают с правилами для самого Webpack, чтобы иметь возможность обрабатывать import ()".

Так что нет, вы не можете использовать переменные с инструкциями динамического импорта webpack.