Importing Keycloak breaks typescript in esModule

[AnielloFalcone]

Before reporting an issue

• I have read and understood the above terms for submitting issues, and I understand that my issue may be closed without action if I do not follow them.

Area

adapter/javascript

Describe the bug

I have a monorepo, using Yarn 4 PnP and TS 5.2.2, migrating to ESM only.

I have already the Keycloak setup working like this:

import {default as Keycloak} from 'keycloak-js';

const keycloak = new Keycloak({
    url: 'url,
    realm: 'realm',
    clientId: 'clientId'
});

when I change the type in the package.json from commonjs to module typescript complains about the usage of Keycloak with the following error:

TS2351: This expression is not constructable.
Type
typeof import("[hidden_path]/.yarn/cache/keycloak-js-npm-22.0.5-3b6331b049-3d67303944.zip/node_modules/keycloak-js/dist/keycloak")
has no construct signatures.

I tried changing the import to import * as Keycloak from 'keycloak-js';, import Keycloak from 'keycloak-js'; or even casting the type but it still gives me this error.

Version

22.0.5

Expected behavior

I expected to work as when commonjs is set as type

Actual behavior

Typescript complains about the imported Keycloak usage

How to Reproduce?

Use this repro

Anything else?

No response

[AnielloFalcone]

### UPDATE

it works without any problems if I do:

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak.default({
    url: 'url,
    realm: 'realm',
    clientId: 'clientId'
});

Thanks to @ernestostifano

[jonkoops]

You should not be importing Keycloak JS from a sub-path, that will likely break in the future. You should only import it from 'keycloak-js' directly.

Please also provide a minimal reproducible example with actual code, as I am unable to reproduce your issue. An example on StackBlitz or a GitHub repo with minimal code will suffice.

[AnielloFalcone]

You should not be importing Keycloak JS from a sub-path, that will likely break in the future. You should only import it from 'keycloak-js' directly.

Please also provide a minimal reproducible example with actual code, as I am unable to reproduce your issue. An example on StackBlitz or a GitHub repo with minimal code will suffice.

Yeah my bad, I should have update the import, it was one of my tests to find a solution.

Unfortunately, even if typescript does not complain anymore I still get:

Uncaught TypeError: keycloak_js__WEBPACK_IMPORTED_MODULE_1__.default.default is not a constructor
    at ./src/auth.ts (auth.ts:4:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/app.tsx (bundle.js:20:66)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/index.tsx (auth.ts:49:1)
    at options.factory (react refresh:6:1)

when I run the application

[jonkoops]

Again, please provide a minimal and reproducible example. We cannot fix bugs we cannot reproduce.

[AnielloFalcone]

@jonkoops https://github.com/AnielloFalcone/keycloak-repro

[AnielloFalcone]

UPDATE:

@jonkoops I created a patch of your package following this comment:

Doubling the declaration files (just duplicated the file and renamed it to keycloak.d.mts) and using that import syntax fixes the issue.

"./*": {
    "import": {
        "types": "./dist/*.d.mts",    
        "default": "./dist/*.mjs"
    },
    "require": {
        "types": "./dist/*.d.ts",
        "default": "./dist/*.js"
    }
}

[jonkoops]

Thanks for the reproduction, this helps a lot! Looking at your proposed solution, I agree that is likely the best option to add an "exports" field. In fact I think I'll make the jump and convert everything to ESM, as Keycloak JS is intended as a client-side package anyways, so CommonJS support is no longer required.

[jonkoops]

Upon closer inspection, we still need the UMD build to statically serve Keycloak JS. This should be deprecated and removed, but now is not the time to do so. I'll create a fix that maintains the compatibility.

[AnielloFalcone]

Hi @jonkoops thanks for the quick fix! It will be available in the 24.0.0 or is already available in the 23.0.0 just released?

[jonkoops]

Since it is a breaking change it will be made available for v24, unfortunately it was too late to land this in v23.