Oscar•3w ago

Importing the @zitadel/client into my CommonJS project doesn't work

I get the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/<me>/Developer/<project>/node_modules/@zitadel/proto/cjs/zitadel/admin_pb.js from /Users/<me>/Developer/<project>/node_modules/@zitadel/client/dist/v1.cjs not supported.
admin_pb.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename admin_pb.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/<me>/Developer/<project>/node_modules/@zitadel/proto/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/<me>/Developer/<project>/node_modules/@zitadel/proto/cjs/zitadel/admin_pb.js from /Users/<me>/Developer/<project>/node_modules/@zitadel/client/dist/v1.cjs not supported.
admin_pb.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename admin_pb.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/<me>/Developer/<project>/node_modules/@zitadel/proto/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

I saw some other conversation about this, but it's not super clear to me what the conclusion was - it seems like some code was merged into the package. @zitadel/* are both version 1.3.1 I'll drop my tsconfig in here for reference:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

Thanks in advance for any help

5 Replies

Rajat•3w ago

hey @Oscar thanks for your question, I will take a look and get back to you. hey @Oscar good day, this has been raised internally, will get back to you

OscarOP•3w ago

Cheers - What sort of timeline can I expect here? Vague is fine, but I'll need to plan my work around it

Rajat•3w ago

hey @Oscar checking with the team now

OscarOP•3w ago

I think that this line: https://github.com/zitadel/zitadel/blob/4dad13cbcd0fb4746e4bdbf1e317bde9aecd968f/packages/zitadel-proto/buf.gen.yaml#L18 should be - import_extension=cjs (instead of =js, because the package defaults .js files to be treated as esm) I'll have to set the repo up to test this though, which I'm a bit adverse too (given I'm a bit tight on time) - but might be useful to whomever picks this up (alternatively I find some free time and do it myself)

Rajat•2w ago

hey @Oscar our front end engineers are busy atm wiuth other tasks, if someone sees this and wants to pick it up, please feel free 🙂 alternatively, it would be nice if you can create an issue for this, you already have the fix tho, this can go onto description(if you cannot do it), regardless, please lmk

Importing the @zitadel/client into my CommonJS project doesn't work

Did you find this page helpful?