gatsby-remark-vscode

gatsby-remark-vscode copied to clipboard

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

Type with name "GRVSCCodeSpan" does not exists

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

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

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?

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`],
          }]
        ],

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

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

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

Check it out if you would like: https://github.com/andrewbranch/gatsby-remark-vscode/pull/185

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