ReferenceError in version 2.3

[svedaei]

I've got an error as I wanted to run unit-test.

Error:
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '*******/frontend/node_modules/@josempgon/vue-keycloak/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

[JoseGoncalves]

Hi @svedaei. Can you give a little more context on what you are trying to do? In what way are you trying to use this plugin that triggers that error?

[MichaelBrandt4994]

Hi @JoseGoncalves
This is the full error we get

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '..../node_modules/@josempgon/vue-keycloak/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
 ❯ node_modules/@josempgon/vue-keycloak/dist/index.js:3:18
 ❯ ....ts:1:31
      1| import { useKeycloak } from "@josempgon/vue-keycloak"
       |                               ^
      2| import type { KeycloakConfig, KeycloakInitOptions } from "keycloak-js"

Actually, this only happens when we executing vitest. A build is running without problems.

[JoseGoncalves]

Never used vitest but, looking at the output you have supplied, I can only assume that something should not be correctly setup in your tests. Can you provide some small code/test environment in order I can reproduce that issue?

[MichaelBrandt4994]

Okay we fixed the problem, we added in our vitest.config.ts the resolve.mainFields: ["module"].
This solved it for us. Somehow the change in the package.json "type": "module", was causing the error on our side. Because of this, it was complaining with the error above.
The fix seems forcing to use the correct file index.esm.js and not index.js. I did not fully understand why the "type": "module" is causing the issue for us. But for now we fixed it, so this issue can be closed.

[JoseGoncalves]

Hi @MichaelBrandt4994 I think I should have fixed your issue in v2.3.1. That version should not require any extra config in vitest. Please check it.

[MichaelBrandt4994]

Yes it is working without an extra config, Thanks! But we receive now some linting errors 😄

vue-tsc --noEmit -p tsconfig.vitest.json --composite false

Could not find a declaration file for module '@josempgon/vue-keycloak'. '.../node_modules/@josempgon/vue-keycloak/dist/index.esm.js' implicitly has an 'any' type.
  There are types at '.../node_modules/@josempgon/vue-keycloak/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@josempgon/vue-keycloak' library may need to update its package.json or typings.

3 import { vueKeycloak } from "@josempgon/vue-keycloak"

But i will investigate this.

[JoseGoncalves]

@MichaelBrandt4994 If you find a solution for that issue please tell me... I could also check that on my side, if you can provide me a sample project that emits that linting error.

[JoseGoncalves]

@MichaelBrandt4994 I think this change on package.json can solve your issue:

diff --git a/package.json b/package.json
index 829f61a..777f28b 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,9 @@
   "main": "./dist/index.cjs",
   "exports": {
     "require": "./dist/index.cjs",
-    "import": "./dist/index.mjs"
+    "import": "./dist/index.mjs",
+    "types": "./dist/types/index.d.ts"
   },
-  "types": "./dist/types/index.d.ts",
   "files": [
     "dist/"
   ],

Can you please check that?

[JoseGoncalves]

Hi @MichaelBrandt4994 I was able to reproduce your latest issue and fixed it in release v2.3.3. Please check if that also works for you.

[MichaelBrandt4994]

Yes it works 🎉
Thanks!