Property 'initialize' does not exist after upgrading to v9.2.2

[azat-io]

Description

I'm using mermaid with dynamic import:

let { initialize, render } = (await import('mermaid')).default

After updating to version 9.2.2 I get the following errors:

Property 'initialize' does not exist on type 'typeof import("/Users/user/Developer/azat-io/node_modules/.pnpm/mermaid@9.2.2/node_modules/mermaid/dist/mermaid")'.

32       let { initialize, render } = (await import('mermaid')).default

Property 'render' does not exist on type 'typeof import("/Users/user/Developer/azat-io/node_modules/.pnpm/mermaid@9.2.2/node_modules/mermaid/dist/mermaid")'.

32       let { initialize, render } = (await import('mermaid')).default

In version 9.2.1 everything works fine

[sidharthv96]

Can you share more info on your build setup and a minimal reproduction if possible?

[azat-io]

@sidharthv96 I created demo repo:
https://github.com/azat-io/mermaid-ts-errors-9.2.2

1. pnpm install
2. pnpm test

[sidharthv96]

//  tsconfig.json
-    "moduleResolution": "nodenext",
+    "moduleResolution": "node",

Seems to fix the issue.

[sidharthv96]

@aloisklink @knsv, changing "type": "module", in our package.json also fixes the problem.

Also, I was checking tslib, another dependency of docusaurus and they don't have a type in their package.json.
When I removed it from ours, EVERYTHING works.

// Webpack
const mermaid = require('mermaid');
import mermaid from 'mermaid';

// Vanilla
import mermaid from "mermaid";
let { initialize, render } = (await import("mermaid")).default;

So, why don't we just remove that from package.json (in mermaid)?

[azat-io]

So, why don't we just remove that from package.json?

Because another package requires it.

Downgrading to v9.2.1 also fix problem.

[sidharthv96]

@azat-io, I was actually talking about removing "type": "module", from the mermaid package, so it works for all downstream dependencies easily.

Will release v9.2.3 with this fix if there are no major issues with removing type from package.json.

[azat-io]

Thanks. I'll wait v9.2.3

[sidharthv96]

@azat-io can you try 9.2.3-rc.1 ?

[sidharthv96]

Will release 9.2.3 once the issue is confirmed to be resolved.

[azat-io]

@sidharthv96 I have updated mermaid to v9.2.3-rc1 and the problem is still there:
https://github.com/azat-io/mermaid-ts-errors-9.2.2

[aloisklink]

@sidharthv96 I have updated mermaid to v9.2.3-rc1 and the problem is still there:
https://github.com/azat-io/mermaid-ts-errors-9.2.2

Confirmed, I'm having the same issue. If you disable noEmit and use // @ts-ignore to hide the TypeScript error, running the generated index,js file works fine, so this seems like an error in the types file.

@azat-io, can you try using "moduleResolution": "node" in your tsconfig.json file? That works for me.

The new "moduleResolution": "nodenext" (see https://www.typescriptlang.org/tsconfig#moduleResolution) was only recently added in TypeScript 4.7

It's possible that what you're currently seeing is a bug in TypeScript, since as far as I'm aware, we're copying exactly what TypeScript recommends, and our code works correctly in Node.JS, see https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#esm-nodejs

I'm a bit unsure, TypeScript doesn't yet have the best documentation on how to make dual CommonJS/ESM packages.

[azat-io]

Are you considering migration to pure ESM?

[aloisklink]

Are you considering migration to pure ESM?

See #3590

I'm pretty for it, since it would make things a lot simpler.

Currently the CommonJS version of Mermaid only works because it bundles together all dependencies (some of them, like d3 are ESM only now). And making packages that are cross-compatible with both CommonJS and ESM is pretty easy if you're just targeting Node, but if you're targeting TypeScript + Node + every other potential bundler, it gets very complicated (e.g. we changed "type": "module" to "type": "commonjs" to fix another TypeScript issue, which then caused this TypeScript issue).

[sidharthv96]

Weird, I tested with the locally modified package, and it was working fine. But the release version is failing for me too. Hmm....

[azat-io]

Issue is relevant for version v9.2.3-rc.1

[azat-io]

Why the issue was closed?

[sidharthv96]

I think GitHub auto-closed it because I had the issue number in my commit message.

[azat-io]

I updated mermaid to v9.3.0 and issue was not fixed:
https://github.com/azat-io/mermaid-ts-errors-9.2.2

Can you reopen the issue again?

[aloisklink]

It looks like Mermaid v10 has fixed this issue, by switching to ESM-only and dropping CJS support!

I've tested this with azat-io/mermaid-ts-errors-9.2.2@9169ca8, I just changed Mermaid version in the package.json to point to Mermaid v10:

diff --git a/package.json b/package.json
index 1444aee..cd2e04d 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "mermaid": "^9.3.0",
+    "mermaid": "^10.0.0",
     "typescript": "^4.8.4"
   }
 }

[azat-io]

Thanks!