webpack - Cannot find module './grid_control' from Mapbox

Question

I just changed my application to lazy-load Mapbox like this:

    private loadMapBox(): Promise<any> {
        return import("mapbox.js/dist/mapbox")
            .then(m => {
                // When the Mapbox module is loaded, it registers itself as "window.L"
                // but the module's content is not returned in the variable "m".
                this.mapbox = (<any>window).L;
            });
    }

And I started getting this error when trying to run my tests (even though it compiled ok):

Error: Unable to resolve module [./grid_control] from [/my/path/node_modules/mapbox.js/dist/mapbox.js]
...
Error: Cannot find module './grid_control' from '/my/path/node_modules/mapbox.js/dist'
    at /my/path/node_modules/karma-typescript/src/bundler/resolve/resolver.ts:217:27
    at /my/path/node_modules/browser-resolve/index.js:265:24
    at /my/path/node_modules/resolve/lib/async.js:55:18
    at load (/my/path/node_modules/resolve/lib/async.js:69:43)
    at onex (/my/path/node_modules/resolve/lib/async.js:92:31)
    at /my/path/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:153:21)

When I changed the line:

import("mapbox.js/dist/mapbox")

to:

import("mapbox.js")

The tests started working ok.

I don't know much of how Webpack works. Why does the first syntax not work? I expected that specifying the whole path was ok, for example when you want to read the minified version of 3rd-party library.

Also, notice that both syntax work ok for when the application is running, the problem was only in the Karma tests.

Thanks. Thanks.

question from:https://stackoverflow.com/questions/65891690/cannot-find-module-grid-control-from-mapbox

Answer 1

Waitting for answers