export default <Class> exports double nested default

First I want to say that I know my title is not the best way to describe my issue, but at the same time I don't have a clear understanding of this technology to be able to express it in a better way.

Some info

I am working on an rather big open source project where by using webpack you can bundle whole thing together in a single file.

The project is mostly written in Typescript.

Build Up

I have a script that contains and exports class Dom() this way:

export default class Dom {
    //stuff
}

In a different script I import this class as $ and access it by $.functionName() with no compiler errors.

import $ from './dom';

export default class SelectionUtils {
    //stuff
}

The Problem

After the whole project has been compiled and bundled with webpack I deploy it and see that the instance of class Dom is being deployed in the form of _dom.default.default instead of _dom.default. Meaning I have no access to the class functions.

Object structure:

_dom
 |--default
 |  |--default: f Dom()
 |  |--__esModule: true
 |  |--_proto_: Object
 |--_proto_: Object

Any hint on why this happens would be welcome.

Thanks in advance.

PS: I tried to make this post as clear as I could, but again, since I don't understand the nature of the problem it's been really hard for me to express it.

I solved my problem by creating a variable inside the class I want to use my import.

something like this:

export default class SelectionUtils {
    
    public $ = require('./dom').default;
    //stuff
}

I know that this probably is not the best solution but it works for now.