reactjsreflection

React lazy import statement can't handle expression

So following dynamic loading works fine:

return React.lazy(() => import("./hotels/components/" + componentName));

Following does not work:

const path = "./hotels/components/";
return React.lazy(() => import(path + componentName));

Now i think it might have something to do with the minifier since in the case where it works "import" turns blue in vscode. In case where it doesn't work "import" is yellow.

Also when i compile for the case where it doesn't work i get following warning:

Critical dependency: the request of a dependency is an expression

Has anyone ran into this issue?

I tried everything from this similar question:

Webpack - Critical dependency: the request of a dependency is an expression

Solution

  • Following solved the error and got rid of the warning. Just had to embed variable.

    return React.lazy(() => import(`${path + componentName}`));