react-loadable higher order component

Question

I'm trying to use react-loadable to implement code splitting, and as suggested in the docs I've created a HOC for it, like this:

export default function({ componentPath }) {
  return Loadable({
    loader: async () => {      
      const component = await import(componentPath)
      return component;
    },  
    delay: 200
  });
}

and I use it like this

import withLoadable from "hoc/withLoadable";

....

const Home = withLoadable({componentPath: "containers/Home"});

but I got the following error

Error: Cannot find module 'containers/Home'
    at eval (eval at ./src/hoc lazy recursive (main.chunk.js:formatted:98), <anonymous>:5:11)

Referring to the docs here, they mentioned this issue and how to solve it, I tried to add the modules, and webpack attributes but it didn't work.

BTW: in webpack.config.js I've added the "src" directory to the resolve modules like this:

...
resolve: {
      // This allows you to set a fallback for where Webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: ['src','node_modules'].concat(
        // It is guaranteed to exist because we tweak it in `env.js`
        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
      ),
...

I'm sure I miss something, but I can get it ...