0

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

Maxqueue
  • 1,309
  • 1
  • 12
  • 35
  • Does this answer your question? [Webpack - Critical dependency: the request of a dependency is an expression](https://stackoverflow.com/questions/42908116/webpack-critical-dependency-the-request-of-a-dependency-is-an-expression) – Viet Dinh Sep 14 '20 at 19:04
  • @Viet Dinh It did not work – Maxqueue Sep 14 '20 at 19:17
  • This may help you, refer to [here](https://stackoverflow.com/questions/58349959/react-dynamic-import-using-a-variable-doesnt-work). – Eric Sep 14 '20 at 22:56
  • @Eric yes this worked thanks – Maxqueue Sep 15 '20 at 19:11

1 Answers1

0

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

return React.lazy(() => import(`${path + componentName}`));
Maxqueue
  • 1,309
  • 1
  • 12
  • 35