Gatsby 4: Type with name "GRVSCCodeSpan" does not exists

[TommasoAmici]

When attempting to build my site with Gatsby 4.0.0 I get this error:

Type with name "GRVSCCodeSpan" does not exists

[andrewbranch]

I don’t currently have the bandwidth to update this for Gatsby 4, but gladly review a PR for it.

[dimitrisnl]

@andrewbranch Maybe someone from the Gatsby user collective can help ?

[wesbos]

I bet you can bypass all the gatsby stuff and just use the remark plugin directly. I'm trying this right now. Anyone else have success?

[wesbos]

Yeah that seems to have worked!

In your gatsby-config.js, remove the plugin from gatsbyRemarkPlugins and add remarkPlugins to your gatsby-plugin-mdx options

        remarkPlugins: [
          [require('gatsby-remark-vscode').remarkPlugin, {
              theme: `Cobalt2`,
              extensions: [`theme-cobalt2`],
          }]
        ],

[graysonhicks]

I think this may be from using fs to load the schema here. Could be as simple as require'ing the schema:

https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#bundling-external-files
https://www.gatsbyjs.com/docs/reference/release-notes/migrating-source-plugin-from-v3-to-v4/#5-bundling-external-files

[N0K0]

Yeah that seems to have worked!

In your gatsby-config.js, remove the plugin from gatsbyRemarkPlugins and add remarkPlugins to your gatsby-plugin-mdx options

        remarkPlugins: [
          [require('gatsby-remark-vscode').remarkPlugin, {
              theme: `Cobalt2`,
              extensions: [`theme-cobalt2`],
          }]
        ],

Where unable to make this approach work. Might be me wrongly configuring webpack 5 :')

Same issue both when resolving all the packages or just ignoring them like so

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback:{
        fs: false,
        os: false,
        path: false,
        zlib: false,
        crypto: false,
        stream: false,
        constants: false,
        module: false
      }
    }
  })
}

Something i noticed:

warn ./node_modules/gatsby-remark-vscode/src/processExtension.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
warn ./node_modules/gatsby-remark-vscode/src/processExtension.js
Critical dependency: the request of a dependency is an expression
warn ./node_modules/gatsby-remark-vscode/src/utils.js
Critical dependency: the request of a dependency is an expression

And of course: The page where i try to add the plugin
https://github.com/N0K0/gatsby-garden

[dimitrisnl]

Hey folks, gave it a try after reading @graysonhicks suggestions

Check it out if you would like: #185

[yehezkiell]

Yeah that seems to have worked!

In your gatsby-config.js, remove the plugin from gatsbyRemarkPlugins and add remarkPlugins to your gatsby-plugin-mdx options

        remarkPlugins: [
          [require('gatsby-remark-vscode').remarkPlugin, {
              theme: `Cobalt2`,
              extensions: [`theme-cobalt2`],
          }]
        ],

It works but I cant change theme in here

Gatsby version: 4.5.4
"gatsby-remark-vscode": "^3.3.1",

resolve: `gatsby-plugin-mdx`,
     options: {
       extensions: [".mdx", ".md"],
       remarkPlugins: [
         require("gatsby-remark-vscode").remarkPlugin,
         {
           theme: {
             default: "Solarized Light",
             dark: "Monokai Dimmed",
           },
           extensions: ["Kotlin"],
         },
       ],

@andrewbranch