Javascript: generalizing react-loadable with closure

Question

I am using react-loadable to load the views. The code below works fine:

const Home = Loadable({
    loader: () =>
        import ('./views/home'),
    loading: Loading,
});

But I have multiple views, hence I want to generalize (refactor) the above code by replacing the path string with a variable. And that's where the problem starts. I tried following technique, but it doesn't load the target view, instead it just keeps the Loading view, which is just a temporary view containing simply 'Loading...' string.

const getLoadableView = (viewPath) => {
  return Loadable({
    loader: ((p) => {
      const m = p;
      return () => {
        console.log(m); //this one prints the correct value
        return import(m);
      };
    })(viewPath),
    loading: Loading
  });
}
const Home = getLoadableView('./views/home');

Am I missing something? Thanks.

Answer 1

I resolved this issue by the following trick:

const getLoadableView = (viewPath) => {
  return Loadable({
    loader: () => import(`./${viewPath}`);;
    })(viewPath),
    loading: Loading
  });
}
const homeViewPath = 'views/home';
const Home = getLoadableView(homeViewPath);

You can notice that I have done nothing special, but just partitioned the path in two parts. The first path is hardcoded in import call.

Obviously this is not a solid solution, but I could not find the actual reason behind such behaviour of import call.