I'm trying to dynamically load routes using React Router's `getComponent()` method. I would like to abstract the dynamic loading (via `System.import()`) into a function that takes the name of a path. However, when I try to this I get the following error:

> 
> Cannot find module 'features/auth/containers/LoginFormContainer'.
> 
> 
> 

**Does not work**

```
function loadRoute(path) {
    return function(location, callback) {
        console.log('path?', path); // => 'features/auth/containers/LoginFormContainer'
        System.import(path)
            .then((cb => module => {
                return cb(null, module.default)
            })(callback))
            .catch(err => console.error('Dynamic route chunk loading failed', err));
    }
}

export const routes = [
    {
        path: '/login',
        getComponent: loadRoute('features/auth/containers/LoginFormContainer')
    },
    ...

```

If I try hardcoding in the path, it works as expected:

e.g.,

**Works correctly**

```
function loadRoute(path) {
    return function(location, callback) {
        System.import('features/auth/containers/LoginFormContainer')
            .then((cb => module => {
                return cb(null, module.default)
            })(callback))
            .catch(err => console.error('Dynamic route chunk loading failed', err));
    }
}

```

Why is this not working and how I can I specify a path to be loaded by System.import?

---

**Update**

The following does not work either, results in the same error:

```
const fn = (cb) => (module) => {
    const Component = module.default;
    return cb(null, Component);
}

const loadRoute = (path) => (location, callback) => {
    System.import(path)
        .then(fn(callback))
        .catch(e => console.warn('Could not load route chunk', e));
}

export const routes = [
    {
        path: '/login',
        //component: LoginForm
        getComponent: loadRoute('features/auth/containers/LoginFormContainer')
    },

```