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,
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;
};