Posted in Uncategorized

Webpack 2 dynamic async imports resolve subdirs incorrectly

   February 23, 2021  2 Comments on 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.