Webpack 2 dynamic async imports resolve subdirs incorrectly

Do you want to request a feature or report a bug?
I wish to report a bug.

What is the current behavior?

When you run

const dirname = 'MyModule';
System.import(`./subdir/${dirname}`)

It resolves the file path to ./MyModule and says the module cannot be found.

If the current behavior is a bug, please provide the steps to reproduce.

Here is a repository that reproduces this behavior. It also shows that the dynamic path resolution does work when subdirs and implicit index.js are not involved.

https://github.com/Swizec/webpack-bug-showcase/blob/dynamic-async-path-bug/src/index.js

What is the expected behavior?

Webpack loads ./subdir/MyModule/index.js

Please mention other relevant information such as the browser version, Node.js version, Operating System and programming language.

Webpack 2.2.0.rc.3
node 6.9.1
Chrome 55.0.2883.95 (stable)
Babel 6.12

Author: Fantashit

2 thoughts on “Webpack 2 dynamic async imports resolve subdirs incorrectly

  1. Yes, and it works without the subpath.

    const sameModule = await import('./a-module');
    sameModule.subModule(); // outputs 'now in sub module'
        
    const sameModuleName = 'a-module';
    const sameModule = await import(`./${name}`);  
    sameModule.subModule(); // outputs 'now in sub module'

    Which leads me to believe it should work with paths more complex than ./ too.

  2. This works:

    function systemImportLoad(subModule) {
        return System.import('./deps/modules/' + subModule + '/index.js');
    }
    
    function importLoad(subModule) {
        return import('./deps/modules/' + subModule + '/index.js');
    }
    
    systemImportLoad('sub-folder-module-a').then(module => module.default());
    systemImportLoad('sub-folder-module-b').then(module => module.default());
    
    importLoad('sub-folder-module-a').then(module => module.default());
    importLoad('sub-folder-module-b').then(module => module.default());

    Output:

    in sub folder module a
    in sub folder module a
    in sub folder module b
    in sub folder module b
    

    This does not work (without + '/index.js'):

    function systemImportLoad(subModule) {
        return System.import('./deps/modules/' + subModule);
    }
    
    function importLoad(subModule) {
        return import('./deps/modules/' + subModule);
    }
    
    systemImportLoad('sub-folder-module-a').then(module => module.default());
    systemImportLoad('sub-folder-module-b').then(module => module.default());
    
    importLoad('sub-folder-module-a').then(module => module.default());
    importLoad('sub-folder-module-b').then(module => module.default());

Comments are closed.