andrewbranch / gatsby-remark-vscode

Gatsby plugin to provide VS Code’s syntax highlighting to Markdown code fences
MIT License
296 stars 27 forks source link

Build fails with `gatsby-plugin-mdx` #230

Closed RYRY1002 closed 3 months ago

RYRY1002 commented 3 months ago

I am building a portfolio site with a blog component. The blog uses gatsby-remark-vscode for code highlighting. Since implementing gatsby-remark-vscode, I have switched to using gatsby-plugin-mdx from gatsby-transformer-remark thanks to being able to include JSX directly in the markdown page.

Following the gatsby-plugin-mdx documentation as well as code snippets from issues in this repository, I added gatsby-remark-vscode as a gatsbyRemarkPlugins entry like so:

// gatsby-config.ts
{
  resolve: "gatsby-plugin-mdx",
  options: {
    extensions: [".md", ".mdx"],
    gatsbyRemarkPlugins: [
      {
        resolve: "gatsby-remark-vscode",
        options: {
          theme: {
            default: "Light+ (default light)",
            dark: "Dark+ (default dark)"
          }
        }
      }
    ]
  }
}

Then when building the site immediately afterwards I get the following:

C:\Users\riley\Documents\gatsby>gatsby clean
info Deleting .cache, public, C:\Users\riley\Documents\gatsby\node_modules\.cache\babel-loader,
C:\Users\riley\Documents\gatsby\node_modules\.cache\terser-webpack-plugin
info Successfully deleted directories

C:\Users\riley\Documents\gatsby>gatsby develop
success compile gatsby files - 5.405s
info The following flags are active:
- FAST_DEV · Enable all experiments aimed at improving develop server start time & develop DX.
- PRESERVE_FILE_DOWNLOAD_CACHE · (Umbrella Issue (https://gatsby.dev/cache-clearing-feedback)) · Don't delete the downloaded files cache when changing gatsby-node.js & 
gatsby-config.js files.

There is one other flag available that you might be interested in:
- PARALLEL_SOURCING · EXPERIMENTAL · (Umbrella Issue (https://gatsby.dev/parallel-sourcing-feedback)) · Run all source plugins at the same time instead of serially. For
sites with multiple source plugins, this can speedup sourcing and transforming considerably.

success load gatsby config - 0.191s
warn Plugin gatsby-plugin-posthog is not compatible with your gatsby version 5.13.5 - It requires gatsby@^2.0.0
warn Plugin gatsby-plugin-posthog is not compatible with your gatsby version 5.13.5 - It requires gatsby@^2.0.0
success load plugins - 2.699s
success onPreInit - 0.022s
success initialize cache - 0.137s
success copy gatsby files - 0.410s
success Compiling Gatsby Functions - 0.926s
success onPreBootstrap - 1.044s
success createSchemaCustomization - 0.053s
success Checking for changed pages - 0.055s
success source and transform nodes - 2.605s
warn `createResolvers` passed resolvers for type `MarkdownRemark` that doesn't exist in the schema. Use `createTypes` to add the type before adding resolvers.

 ERROR  UNKNOWN

Missing onError handler for invocation 'building-schema', error was 'Error: Type with name "GRVSCCodeBlock" does not exists'. Stacktrace was 'Error: Type with name
"GRVSCCodeBlock" does not exists
    at SchemaComposer.get (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\TypeStorage.ts:39:13)
    at ThunkComposer._thunk (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\TypeMapper.ts:737:34)
    at ThunkComposer.get ofType [as ofType] (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\ThunkComposer.ts:21:34)
    at ThunkComposer.getUnwrappedTC (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\ThunkComposer.ts:41:17)
    at unwrapTC (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\utils\typeHelpers.ts:360:31)
    at unwrapOutputTC (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\utils\typeHelpers.ts:373:10)
    at ObjectTypeComposer.getFieldTC (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\ObjectTypeComposer.ts:635:26)
    at C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\SchemaComposer.ts:268:26
    at Array.forEach (<anonymous>)
    at SchemaComposer.removeEmptyTypes (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\SchemaComposer.ts:267:24)
    at SchemaComposer.buildSchema (C:\Users\riley\Documents\gatsby\node_modules\graphql-compose\src\SchemaComposer.ts:197:12)
    at buildSchema (C:\Users\riley\Documents\gatsby\node_modules\gatsby\src\schema\schema.js:88:33)
    at build (C:\Users\riley\Documents\gatsby\node_modules\gatsby\src\schema\index.js:141:18)
    at buildSchema (C:\Users\riley\Documents\gatsby\node_modules\gatsby\src\services\build-schema.ts:19:3)'

⠙ building schema

The log ends here as the building schema stage will never complete, forcing me to interrupt the build.

I've also tried removing all of the gatsby-remark-vscode configuration, like so:

// gatsby-config.ts
{
  resolve: "gatsby-plugin-mdx",
  options: {
    extensions: [".md", ".mdx"],
    gatsbyRemarkPlugins: [
      "gatsby-remark-vscode"
    ]
  }
}

I've also tried moving it to the very last plugin in the gatsby config, both with no luck.

Obviously, the stack trace points an issue with GraphQL, but this is my first project using Gatsby and I'm unfamiliar with GraphQL's code base.

The site with the error is available to tinker with at https://github.com/RYRY1002/riley.technology-gatsby/tree/mdx

Thanks in advance.

RYRY1002 commented 3 months ago

A solution presented itself in https://github.com/andrewbranch/gatsby-remark-vscode/issues/174#issuecomment-985672859. Replacing

// gatsby-config.ts
{
  resolve: "gatsby-plugin-mdx",
  options: {
    extensions: [".md", ".mdx"],
    gatsbyRemarkPlugins: [
      {
        resolve: "gatsby-remark-vscode",
        options: {
          theme: {
            default: "Light+ (default light)",
            dark: "Dark+ (default dark)"
          }
        }
      }
    ]
  }
}

with

// gatsby-config.ts
{
  resolve: "gatsby-plugin-mdx",
  options: {
    mdxOptions: {
      remarkPlugins: [
        [require("gatsby-remark-vscode").remarkPlugin, {
          theme: {
            default: "Light+ (default light)",
            dark: "Dark+ (default dark)"
          }
        }]
      ]
    }
  }
}

did the trick.

I recall trying this solution before creating this issue, but at the time I discarded the solution as it seems to break all .md posts, even with .md being specified as a supported file format. I'm not sure why, it may have something to do with any of a myriad of other plugins currently installed in the project.