Critical dependency: the request of a dependency is an expression while using lazy loading

Question

I am trying to dynamically import modules but getting following error -

Compiled with problems:X

WARNING in ./src/.../useCustomModule.js 21:21-56

Critical dependency: the request of a dependency is an expression

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

export const moduleMapping = {
    CONTEXT_ONE: "./....contextOnePath",
    CONTEXT_TWO: "./....contextTwoPath",
    
};

const getModule = (moduleName) => {
    const module = React.lazy(() => import(moduleMapping[moduleName]));
    return module;
};

export const useCustomModule = (moduleName) => {
    return getModule(moduleName);
};

Note : In eslintrc.json I have following settings - "ecmaVersion": 12,

Answer 1

Recently, I also faced a similar issue but when I used string interpolation, the warning went away. In your code, give a try to this:

const getModule = (moduleName) => {
    const module = React.lazy(() => import(`${moduleMapping[moduleName])}`);
    return module;
};