TypeScript error TS7016 occurs while building a React app with vite

[eecavanna]

Hi, I saw the following error message while using vite to build a React app that imports the [email protected] package:

 $ npm run build

> myapp@0.0.0 build
> tsc && vite build

src/components/Diagram.tsx:3:25 - error TS7016: Could not find a declaration file for module 'mdx-mermaid/lib/Mermaid'. '/Users/me/myapp/node_modules/mdx-mermaid/lib/Mermaid.mjs' implicitly has an 'any' type.
  There are types at '/Users/me/myapp/node_modules/mdx-mermaid/lib/Mermaid.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mdx-mermaid' library may need to update its package.json or typings.

3 import { Mermaid } from "mdx-mermaid/lib/Mermaid";
                          ~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/components/Diagram.tsx:3

Other information about my environment:

$ vite --version
vite/4.5.0 darwin-arm64 node-v20.8.1
$ node --version
v20.8.1
$ npm --version
10.1.0
$ tsc --version
Version 5.2.2

As a workaround, I used patch-package to patch the package locally.

Here's a diff showing the patch:

diff --git a/node_modules/mdx-mermaid/package.json b/node_modules/mdx-mermaid/package.json
index 5168c23..2d1b998 100644
--- a/node_modules/mdx-mermaid/package.json
+++ b/node_modules/mdx-mermaid/package.json
@@ -7,15 +7,18 @@
   "exports": {
     ".": {
       "require": "./lib/mdxast-mermaid.cjs",
-      "import": "./lib/mdxast-mermaid.mjs"
+      "import": "./lib/mdxast-mermaid.mjs",
+      "types": "./lib/mdxast-mermaid.d.ts"
     },
     "./Mermaid": {
       "require": "./lib/Mermaid.cjs",
-      "import": "./lib/Mermaid.mjs"
+      "import": "./lib/Mermaid.mjs",
+      "types": "./lib/Mermaid.d.ts"
     },
     "./lib/Mermaid": {
       "require": "./lib/Mermaid.cjs",
-      "import": "./lib/Mermaid.mjs"
+      "import": "./lib/Mermaid.mjs",
+      "types": "./lib/Mermaid.d.ts"
     }
   },
   "author": "Sam Wall ([email protected])",

I don't have any experience creating TypeScript or JavaScript packages. I wanted to pass along this information in case the maintainers and other people found it useful.

Here's a link to the GitHub Issue that led me to this workaround: microsoft/TypeScript#52363

This issue body was partially generated by patch-package.