Getting error using object property in Loadable using Reactjs

Question

I have the following array I'm trying to map() on.

const componentsNavConfig = [
  {
    id    : 'dashboard',
    title : 'Dashboard',
    type  : 'item',
    icon  : 'dashboard',
    url   : '/dashboard',
    path  : 'layouts/Dashboard',
  },
];

I am trying to implement the following piece of code.

config.js

const items = componentsNavConfig.map( item => ({
  path: item.url,
  component: Loadable({
    loader: () => import(item.path)
  })
}));

The problem is it throws the following error.

config.js Critical dependency: the request of a dependency is an expression

I think it's complaining about the line

loader: () => import(item.path)

because when I replace the above line with the following line, everything works.

loader: () => import('layouts/Dashboard')

The error does not appear and the code behaves as expected.

What's going on here? And how can I use a variable like item.path in the expression without having to hard code the path?

Edit: As suggested in an answer, I have also unsuccessfully tried to use

loader: () => import(`${item.path}`)

and I get the same result.

Edit2: I did some research and it looks like there might be some issue with using dynamic imports in ES6 and Webpack. So, now I'm wondering if my goal here is even achievable.

Here is a relevant SO question.

Here is a blog article.

Edit3: More research

This might be the solution in the docs. Any answer that uses these docs to help me figure out how to do this is still very valid and would be much appreciated.

This is specific to React. Namely, react-loadable.

Answer 1

I'm not fully sure, but trying it like might solve the issue:

loader: () => import(`${item.path}`)

See this relevant case for reference.