Struggling to use with `gatsby-remark-shiki-twoslash`

[julrich]

When installing the Gatsby plugin, and the related @mdx dependencies, I'm unfortunately greeted by the following error when starting Gatsby:

Error: Cannot find module '/local/path/gatsby-theme-kickstartDS/node_modules/gatsby-remark-shiki-twoslash/index'
Require stack:
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-config-and-plugins.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/services/initialize.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/services/index.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/state-machines/develop/services.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/state-machines/develop/index.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/commands/develop-process.js
- /local/path/gatsby-theme-kickstartDS/example/.cache/tmp-1739344-FaoaxufVmTFo
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.resolve (/local/path/gatsby-theme-kickstartDS/node_modules/v8-compile-cache/v8-compile-cache.js:164:23)
    at /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/src/bootstrap/load-plugins/validate.ts:234:52
    at Object.validate (/local/path/gatsby-theme-kickstartDS/node_modules/joi/lib/types/any.js:47:28)

Configuration looks like the following:

{
    resolve: `gatsby-plugin-mdx`,
    options: {
      gatsbyRemarkPlugins: [{
        resolve: "gatsby-remark-shiki-twoslash",
          options: {
            theme: "nord",
          }
        },
      ],
    },
  }

This is on Gatsby 4.1.0, and all plugins updated to their latest versions. What might complicate matters, and may be the root cause for this error (?), is the fact that we're using a mono-repo.

I stumbled upon this issue: https://github.com/gatsbyjs/gatsby/issues/21950 which makes it sound like this may be a "mis-communication" in the way plugins are loaded between Gatsby and Remark? :thinking:

Unfortunately all the proposed workarounds seemed to make no difference for me.

Any ideas on what may be happening?

[julrich]

Unfortunately have not mady any real progress on this. Doesn't work when trying to use directly with gatsby-transformer-remark, either.

In addition to the aforementioned issue, I also found this (which has been open for a while): https://github.com/gatsbyjs/gatsby/issues/21592

[julrich]

After some more time in the VScode debugger, I've stumbled upon this (which is invoked for gatsby-remark-shiki-twoslash), which seems to directly contradict the current structure of the Gatsby plugin? https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/load-plugins/load.ts#L113-L125

resolvedPath evaluates to /local/path/node_modules/gatsby-remark-shiki-twoslash/src, maybe because of the main declaration in package.json? Other plugins seem to have their index on the root of the repo, which seems to be Gatsbys assumption, too, as the lookup that's actually failing is on line 124, using the explicit path ${resolvedPath}/package.json.

Maybe this helps? :thinking:

Edit: Short-circuiting this (manually correcting the path while debugging) seems to reveal more places in Gatsby where that assumption is made:

 ERROR #11321  PLUGIN

"internal-data-bridge" threw an error while running the sourceNodes lifecycle:

Cannot find module '/local/path/gatsby-theme-kickstartDS/node_modules/gatsby-remark-shiki-twoslash/src/package.json'
Require stack:
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/internal-plugins/internal-data-bridge/gatsby-node.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/bootstrap/load-config-and-plugins.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/services/initialize.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/services/index.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/state-machines/develop/services.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/state-machines/develop/index.js
- /local/path/gatsby-theme-kickstartDS/node_modules/gatsby/dist/commands/develop-process.js
- /local/path/gatsby-theme-kickstartDS/example/.cache/tmp-3499546-D0SanNV225aV

File: ../node_modules/gatsby/src/internal-plugins/internal-data-bridge/gatsby-node.js:58:9

[julrich]

Works when short-circuiting that one too (manually rewriting the path just for shiki twoslash). May try my hand on a PR

[orta]

sorry, I've not had much OSS time (and I've not updated the TS website to Gatsby 4 yet) but looking at that stack trace maybe we can not import the package.json but instead grab via fs?

[julrich]

I think the problem here is with Gatsby having pretty set expectations about where to find the package.json, so using fs would mean changing Gatsby, not this plugin, right? :thinking:

Is there a special reason for having index.js in src? Because I'm just not sure that's compatible with Gatsby (right now). https://github.com/shikijs/twoslash/tree/main/packages/gatsby-remark-shiki-twoslash/src

I've fixed it by using patch-package to move index.js to the root, and adjust the package.json main entry. Works flawlessly afterwards!

Btw. really loving the plugin!

[panzerdp]

Would love to release the fix proposed by @julrich. Currently, the described problem doesn't allow me to migrate to Gatsby 4.0.

On a side note, thanks @orta for implementing twoslash. I find it very useful on my blog to explain TypeScript.

[orta]

Yeah, moving the file seems totally reasonable to me 👍🏻 (there's no reason, I probably just copied the folder structure from another package)