Migrate to gatsby-plugin-mdx v4

[robdy]

https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx#migrating-from-v3-to-v4

Tasks

• Updating dependencies - done in 5929dfc
  • npm remove @mdx-js/mdx
  • npm install gatsby@latest - already in 4.25.1 while 4.0.0 required
  • npm install gatsby-plugin-mdx@latest - 4.0.0 required
  • @mdx-js/react@latest - 2.1.2 required
  • If you used any related plugins like gatsby-remark-images, also update them to their @latest version.
    • gatsby-remark-relative-images-v2 - 0.15 is the current version
    • gatsby-remark-images - 6.25 is latest-v4
    • gatsby-remark-copy-linked-files - 5.25 is latest-v4
    • gatsby-remark-autolink-headers - 5.25 is latest-v4
    • gatsby-remark-prismjs - 6.25 is latest-v4
• New options in gatsby-config: Move your remarkPlugins and rehypePlugins keys into the new mdxOptions config option - Not applicable
• GFM & ESM-only packages - not applicable
• Updating createPage action in gatsby-node 8198b36
• Updating page templates d6ebb6f
• Updating MDX content cd5b2a7
• Updating MDX nodes
• v3 to v4: Breaking Changes
  • Removed plugin options: defaultLayouts, mediaTypes, lessBabel, shouldBlockNodeFromTransformation, commonmark
  • Moved plugin options remarkPlugins and rehypePlugins into mdxOptions - not applicable
  • Removed timeToRead, rawBody, slug, headings, html, mdxAST, wordCount, fileAbsolutePath from the query result. You can check Extending the GraphQL MDX nodes to learn how to re-implement some of them on your own. Also check Updating MDX nodes for guidance on changing your queries - logged as HTML field is missing in RSS #714
  • gatsby-plugin-mdx only applies to local files (that are sourced with gatsby-source-filesystem)
  • Removed the ability to use js and json in frontmatter
  • All MDX v2 migration notes apply

Error

failed Building static HTML for pages - 2.677s

 ERROR #95313 

Building static HTML failed for path "/powershell-tip-skip-get/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  39 |   if (Object.getOwnPropertySymbols) {
  40 |     var symbols = Object.getOwnPropertySymbols(object);
> 41 |     if (enumerableOnly) symbols = symbols.filter(function (sym) {
     | ^
  42 |       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
  43 |     });
  44 |     keys.push.apply(keys, symbols);


  WebpackError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite componen
  ts) but got: undefined.
  
  - esm.js:41 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:41:1
  
  - esm.js:42 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:42:1
  
  - esm.js:45 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:45:1
  
  - esm.js:44 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:44:1
  
  - esm.js:42 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:42:1
  
  - esm.js:45 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:45:1
  
  - esm.js:37 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:37:1
  
  - esm.js:42 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:42:1
  
  - esm.js:45 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:45:1
  
  - esm.js:44 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:44:1
  
  - esm.js:42 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:42:1
  
  - esm.js:45 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:45:1
  
  - esm.js:37 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:37:1
  
  - esm.js:42 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:42:1
  
  - esm.js:36 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:36:1
  
  - esm.js:42 
    [robdy-io]/[@mdx-js]/react/dist/esm.js:42:1

Troubleshooting

• Checked that the same error appears when plugins are removed
• Check if the same error appears when MDXProvider is removed from Layout.js
  Different error:

 ERROR #11321  PLUGIN

"gatsby-plugin-feed" threw an error while running the onPostBuild lifecycle:

Cannot query field "html" on type "Mdx".

GraphQL request:9:23
 8 |                     node {
 9 |                       html
   |                       ^
10 |                       fields { slug }



  Error: Cannot query field "html" on type "Mdx".
  GraphQL request:9:23
   8 |                     node {
   9 |                       html
     |                       ^
  10 |                       fields { slug }

• Check if the same error appears when components are removed from MDXProvider - yes
• Check if the same error appears when MDXRenderer is removed from blog-post.js - no

 ERROR #11321  PLUGIN

"gatsby-plugin-feed" threw an error while running the onPostBuild lifecycle:

Cannot query field "html" on type "Mdx".

GraphQL request:9:23
 8 |                     node {
 9 |                       html
   |                       ^
10 |                       fields { slug }



  Error: Cannot query field "html" on type "Mdx".
  GraphQL request:9:23
   8 |                     node {
   9 |                       html
     |                       ^
  10 |                       fields { slug }
  
  - internals.js:17 
    [robdy.io]/[gatsby-plugin-feed]/internals.js:17:13
  
  - task_queues:95 processTicksAndRejections
    node:internal/process/task_queues:95:5
  

not finished onPostBuild - 0.157s

[robdy]

Closed in #712