Unable to use @gerrit0/mini-shiki/ dependency

[ckeshava]

I need help with configuring tsc correctly. What options should I set for module and moduleResolution options?

I'm getting the below error pertaining to the typedoc command:

➜  xrpl.js git:(0a45c589) ✗ npm run docgen

> docgen
> lerna run docgen --stream

lerna notice cli v4.0.0
lerna info versioning independent
lerna info Executing command in 1 package: "npm run docgen"
xrpl: > xrpl@4.2.0 docgen
xrpl: > tsc --build tsconfig.docs.json && typedoc && echo js.xrpl.org >> ../../docs/CNAME
xrpl: ../../node_modules/typedoc/dist/lib/output/themes/MarkedPlugin.d.ts(4,35): error TS2307: Cannot find module '@gerrit0/mini-shiki' or its corresponding type declarations.
xrpl:   There are types at '/Users/ckeshavabs/xrpl.js/node_modules/@gerrit0/mini-shiki/dist/shiki.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
xrpl: ../../node_modules/typedoc/dist/lib/utils/options/declaration.d.ts(1,49): error TS2307: Cannot find module '@gerrit0/mini-shiki' or its corresponding type declarations.
xrpl:   There are types at '/Users/ckeshavabs/xrpl.js/node_modules/@gerrit0/mini-shiki/dist/shiki.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
xrpl: ../../node_modules/typedoc/dist/lib/utils/options/defaults.d.ts(5,38): error TS2307: Cannot find module '@gerrit0/mini-shiki' or its corresponding type declarations.
xrpl:   There are types at '/Users/ckeshavabs/xrpl.js/node_modules/@gerrit0/mini-shiki/dist/shiki.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
xrpl: npm ERR! Lifecycle script `docgen` failed with error: 
xrpl: npm ERR! Error: command failed 
xrpl: npm ERR!   in workspace: xrpl@4.2.0 
xrpl: npm ERR!   at location: /Users/ckeshavabs/xrpl.js/packages/xrpl 
lerna ERR! npm run docgen exited 1 in 'xrpl'

I have verified that node_modules/@gerrit0/mini-shiki folder exists. How can I resolve the above error? I'm using this tsconfig.json file.

[Gerrit0]

Huh, I guess that makes sense... @gerrit0/mini-shiki assumes that you have at least node16 for your module option, as that is what every recent Node TS project should be using.

You could also tell TypeScript not to type check declaration files that aren't directly used by your code with the skipLibCheck option

[ckeshava]

You could also tell TypeScript not to type check declaration files that aren't directly used by your code with the skipLibCheck option

I tried this solution, however I get the same error when I try to use typedoc. I believe skipLibCheck helps only if there are errors in the */node_modules/**/*.d.ts files. However, there are no errors in this case. typedoc is unable to find the module, as indicated by Cannot find module '@gerrit0/mini-shiki' or its corresponding type declarations.

Do you have any other suggestions?

tsc --build tsconfig.docs.json works correctly, however typedoc throws this error. I wonder why there is this discrepancy.

[ckeshava]

Furthermore, I have tried node16, nodenext and bundler values for moduleResolution. I have used appropriate values for module to be compatible with the moduleResolution field.

However, all of these result with the same error message. Changing the moduleResolution field does not help typedoc.

[Gerrit0]

There's a couple layers of problems in your repo.

1. TypeDoc since 0.27 is ESM only, so your plugin code needs to be compiled to ESM.
2. Node16 uses the type field in your package.json to determine if code should be compiled to ESM. As you don't have that flag set, it will compile as CommonJS and not work. This can be worked around by changing the .tsx extension to .mts to make TypeScript emit .mjs files, but then you can't use JSX.

These changes seem to work... Personally I'd probably even drop the TS->JS compilation step for your plugin and just commit a JS file.

diff --git a/packages/xrpl/tsconfig.docs.json b/packages/xrpl/tsconfig.docs.json
index 3958554c..5a5711fc 100644
--- a/packages/xrpl/tsconfig.docs.json
+++ b/packages/xrpl/tsconfig.docs.json
@@ -4,10 +4,10 @@
     "jsx": "react",
     "jsxFactory": "JSX.createElement",
     "jsxFragmentFactory": "JSX.Fragment",
-    "lib": ["es2015", "dom"],
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "target": "ES2015"
+    "lib": ["es2021"],
+    "module": "Node16",
+    "target": "ES2021",
+    "skipLibCheck": true
   },
-  "include": ["./typedoc.tsx"]
+  "include": ["./typedoc.mts"]
 }
diff --git a/packages/xrpl/typedoc.json b/packages/xrpl/typedoc.json
index 20a856c0..9b89a571 100644
--- a/packages/xrpl/typedoc.json
+++ b/packages/xrpl/typedoc.json
@@ -16,5 +16,5 @@
   ],
   "categorizeByGroup": false,
   "readme": "../../README.md",
-  "plugin": ["./dist/docs/typedoc.js"]
+  "plugin": ["./dist/docs/typedoc.mjs"]
 }
diff --git a/packages/xrpl/typedoc.mts b/packages/xrpl/typedoc.mts
new file mode 100644
index 00000000..8483ce1d
--- /dev/null
+++ b/packages/xrpl/typedoc.mts
@@ -0,0 +1,16 @@
+import { JSX } from 'typedoc';
+const GTMScript = `
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-M7HKJJ3');
+`;
+export function load(app) {
+    app.renderer.hooks.on('head.begin', () => (JSX.createElement(JSX.Fragment, null,
+        JSX.createElement("script", { src: "https://cmp.osano.com/AzyjT6TIZMlgyLyy8/ad2447d5-f101-40df-b92e-d6452b5ecac0/osano.js" }),
+        JSX.createElement("script", null,
+            JSX.createElement(JSX.Raw, { html: GTMScript })))));
+    app.renderer.hooks.on('body.begin', () => (JSX.createElement("noscript", null,
+        JSX.createElement("iframe", { src: "https://www.googletagmanager.com/ns.html?id=GTM-M7HKJJ3", height: 0, width: 0, style: "display:none;visibility:hidden" }))));
+}
diff --git a/packages/xrpl/typedoc.tsx b/packages/xrpl/typedoc.tsx
deleted file mode 100644
index 015e7aa8..00000000
--- a/packages/xrpl/typedoc.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { Application, JSX } from 'typedoc'
-
-const GTMScript = `
-(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-M7HKJJ3');
-`
-
-export function load(app: Application) {
-  app.renderer.hooks.on('head.begin', () => (
-    <>
-      <script src="https://cmp.osano.com/AzyjT6TIZMlgyLyy8/ad2447d5-f101-40df-b92e-d6452b5ecac0/osano.js"></script>
-      <script>
-        <JSX.Raw html={GTMScript} />
-      </script>
-    </>
-  ))
-
-  app.renderer.hooks.on('body.begin', () => (
-    <noscript>
-      <iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-M7HKJJ3"
-        height={0}
-        width={0}
-        style="display:none;visibility:hidden"
-      ></iframe>
-    </noscript>
-  ))
-}

[ckeshava]

thanks a lot for your detailed answer