gatsby-mdx does not work with plugin

[alanonthegit]

After NPM install and adding it to the gatsby-config, the following errors are displayed.

Has also been verified by others.

[iamskok]

@ar-stackrox Do you mind sending a full gatsby-config.js file?

[luisduenas]

same issue here, this is my gatsby-config.js

module.exports = {
   siteMetadata: {
   ...
    },
  },
  mapping: {
    "Mdx.frontmatter.contributors": "ContributorYaml",
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/../source/data`,
        name: `data`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/../source/docs/assets/images`,
        name: `images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/../source/content`,
        name: `content`,
      },
    },
    `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-code-buttons",
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 1035,
              sizeByPixelDensity: true,
              showCaptions: true,
              linkImagesToOriginal: false,
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
            },
          },
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: null,
              rel: "nofollow noopener noreferrer external",
            },
          },
          {
            resolve: `gatsby-remark-slug`,
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        google: {
          families: ["Open Sans"],
        },
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
    },
    `gatsby-plugin-react-helmet`,
  ],
}

[alanonthegit]

Sure, here it is. Trying to use it with gatsby-remark-vscode instead of prism, but I'm loading your plugin before remark-vscode. The build works fine when I remove the code-buttons plugin. I removed the metadata

module.exports = {
  siteMetadata: {
    ...
    },
  
  },

  plugins: [
    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./src/layouts/index.tsx`)
      }
    },
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    "gatsby-plugin-typescript",
    // Add static assets before markdown files
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `uploads`,
        path: `${__dirname}/src/images`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content/`
      }
    },

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `files`,
        path: `${__dirname}/src/files/`
      }
    },
    {
      resolve: `gatsby-mdx`,
      options: {
        extensions: [".mdx", ".md", ".html"],
        // defaultLayouts: {
        //     posts: require.resolve("./src/templates/post.js"),
        //     default: require.resolve("./src/templates/page.js")
        // },
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-code-buttons'
          },
          // gatsby-remark-relative-images must
          // go before gatsby-remark-images
          {
            resolve: `gatsby-remark-relative-images`
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 860,
              linkImagesToOriginal: false,
              showCaptions: true,
              quality: 85,
              withWebp: true
            }
          },
          {
            resolve: "gatsby-remark-copy-linked-files",
            options: {
              destinationDir: "files"
            }
          },
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_self",
              rel: "nofollow"
            }
          },
          {
            resolve: `gatsby-remark-figure-caption`,
            options: { figureClassName: "md-figure" }
          },
          {
            resolve: "gatsby-remark-code-titles"
          },
          {
            resolve: "gatsby-remark-smartypants"
          },
          {
            resolve: "gatsby-remark-embed-video",
            options: {
              width: 640,
              ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
              height: 640, // Optional: Overrides optional.ratio
              related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
              noIframeBorder: true //Optional: Disable insertion of <style> border: 0
            }
          },

          {
            resolve: "gatsby-remark-autolink-headers"
          },

          {
            resolve: `gatsby-remark-vscode`,
            // All options are optional. Defaults shown here.
            options: {
              colorTheme: 'Dark+ (default dark)', // Read on for list of included themes. Also accepts object and function forms.
              wrapperClassName: '',  // Additional class put on 'pre' tag
              injectStyles: true,    // Injects (minimal) additional CSS for layout and scrolling
              extensions: [{
                identifier: 'silvenon.mdx',
                version: '0.1.0'
              }],        // Extensions to download from the marketplace to provide more languages and themes
              languageAliases: {},   // Map of custom/unknown language codes to standard/known language codes
              getLineClassName: ({   // Function allowing dynamic setting of additional class names on individual lines
                content,             //   - the string content of the line
                index,               //   - the zero-based index of the line within the code fence
                language,            //   - the language specified for the code fence
                codeFenceOptions     //   - any options set on the code fence alongside the language (more on this later)
              }) => ''
            }
          }
        ]
      }
    },
    {
      resolve: "gatsby-plugin-svgr",
      options: {
        prettier: true, // use prettier to format JS code output (default)
        svgo: true, // use svgo to optimize SVGs (default)
        svgoConfig: {
          plugins: {
            removeViewBox: false,
            cleanupIDs: false
          }
        }
      }
    },
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-catch-links",
    "gatsby-plugin-lodash",
    "gatsby-plugin-sitemap",

    },
    "gatsby-plugin-postcss",
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        // Setting a color is optional.
        color: `tomato`,
        // Disable the loading spinner.
        showSpinner: false
      }
    },
    {
      resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
      options: {
        // Fields to index
        fields: [`title`, `description`, `tags`],
        // How to resolve each field`s value for a supported node type
        resolvers: {
          // For any node of type MarkdownRemark, list how to resolve the fields` values
          Mdx: {
            title: node => node.frontmatter.title,
            description: node => node.frontmatter.description,
            tags: node => node.frontmatter.tags,
            published: node => node.frontmatter.published,
            path: node => node.fields.slug
          }
        }
      }
    },
    "gatsby-plugin-meta-redirect",
    "gatsby-plugin-remove-serviceworker"
  ]
};

[iamskok]

@ar-stackrox Thanks for providing your gatsby-config.js. I'm currently away from the computer, can you do me a favor and replace gatsby-remark-code-buttons with gatsby-remark-code-titles plugin and tell me if you will be getting the same error?

@luisduenas I will try to look into this issue tomorrow morning.

[alanonthegit]

@iamskok No problem! I'm actually already using that plugin and it works fine -

[iamskok]

@ar-stackrox What I meant is if you could comment out gatsby-remark-code-buttons and paste gatsby-remark-code-titles on its place (from my experience the order of the plugins might sometimes matter) and see if we have any errors. I’m trying to understand if this issue is specific to this plugin or other plugins are affected as well. gatsby-remark-code-titles is a good candidate for this test bc these plugins are very similar with each other.

And I also forgot to ask you for a copy
of your package.json @ar-stackrox @luisduenas @jmolivas
_{Sent with GitHawk}

[luisduenas]

here's my packages.json, i removed gatsby-remark-code-button for now but everything else it's the same

{
  "name": "gatsby-starter-blog",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.0.18",
    "@mdx-js/react": "^1.0.16",
    "date-fns": "^1.30.1",
    "dotenv": "^6.2.0",
    "gatsby": "^2.1.31",
    "gatsby-image": "^2.0.33",
    "gatsby-mdx": "^0.6.3",
    "gatsby-plugin-feed": "^2.0.15",
    "gatsby-plugin-google-analytics": "^2.0.17",
    "gatsby-plugin-manifest": "^2.0.24",
    "gatsby-plugin-react-helmet": "^3.0.9",
    "gatsby-plugin-sharp": "^2.0.28",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-remark-external-links": "0.0.4",
    "gatsby-remark-images": "^2.0.6",
    "gatsby-remark-prismjs": "^3.2.5",
    "gatsby-remark-responsive-iframe": "^2.0.10",
    "gatsby-remark-slug": "^0.1.0",
    "gatsby-source-filesystem": "^2.0.24",
    "gatsby-transformer-json": "^2.1.11",
    "gatsby-transformer-remark": "^2.3.2",
    "gatsby-transformer-sharp": "^2.1.17",
    "gatsby-transformer-yaml": "^2.1.10",
    "prismjs": "^1.15.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-helmet": "^5.2.0",
    "remove": "^0.1.5",
    "tocbot": "^4.6.0"
  },
  "devDependencies": {
    "prettier": "^1.16.4"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  }
}

[luisduenas]

oh, and i forgot to say, i installed gatsby-remark-code-titles and worked fine, i think the problem is in markdownAST

[iamskok]

@luisduenas Thank you. I started looking at it this morning but didn't have enough time to figure it out. Will try to spend more time in the next couple of days.

[iamskok]

@ar-stackrox @luisduenas I tried reproducing this issue by cloning gatsby-mdx example and installing gatsby-remark-code-buttons

My build was clean however the copy button wasn't working bc onClick="copyToClipboard('code block content to copy...')" wasn't populated.

Example repo

[iamskok]

gatsby-remark-code-buttons doesn’t work with MDX. For more information on MDX implementation please reference to the issue above.

_{Sent with GitHawk}

[arinker]

@iamskok: Thank your for your plugin!

I am trying to let
_ "gatsby-plugin-mdx",
_ "gatsby-remark-code-buttons" and
_ "gatsby-remark-prismjs" play together.

Everything but "gatsby-remark-code-buttons" works as expected:

It would be nice if you could me help out to fix it. Please find my code below:

• package.json
• gatsby.config.js
• gatsby.browser.js
• index.js
• get-started.mdx
• Console ERROR
  • Error onLoad
  • Error onClick

package.json

{
  "name": "fluency-framework",
  "version": "0.1.0",
  "description": "Build responsive, mobile-first projects on the web with the world’s most advanced front-end component library.",
  "private": true,
  "author": "Arno Rinker <[email protected]>",
  "browserslist": [
    "ie >= 11",
    "last 3 edge versions",
    "last 3 firefox major versions",
    "last 3 chrome versions",
    "last 3 safari versions",
    "last 3 opera versions"
  ],
  "dependencies": {
    "@deckdeckgo/highlight-code": "^1.0.0-rc.2-1",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/pro-light-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.7",
    "@mdx-js/mdx": "^1.5.3",
    "@mdx-js/react": "^1.5.3",
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.18.21",
    "gatsby-image": "^2.2.30",
    "gatsby-plugin-manifest": "^2.2.25",
    "gatsby-plugin-mdx": "^1.0.67",
    "gatsby-plugin-offline": "^3.0.17",
    "gatsby-plugin-postcss-sass": "^1.0.22",
    "gatsby-plugin-react-helmet": "^3.1.13",
    "gatsby-plugin-sass": "^2.1.20",
    "gatsby-plugin-sharp": "^2.2.34",
    "gatsby-plugin-styled-components": "^3.1.13",
    "gatsby-remark-code-buttons": "^2.0.4",
    "gatsby-remark-prismjs": "^3.3.30",
    "gatsby-source-filesystem": "^2.1.35",
    "gatsby-transformer-remark": "^2.6.48",
    "gatsby-transformer-sharp": "^2.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "sass": "^1.23.3",
    "styled-components": "^4.4.1"
  },
  "devDependencies": {
    "prettier": "^1.18.2"
  },
  "keywords": [
    "fluency"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/arinker/fluency"
  },
  "bugs": {
    "url": "https://github.com/arinker/fluency/issues"
  }
}

gatsby.config.js

module.exports = {
  siteMetadata: {
    title: `fluency`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    menuLinks: [{…}]
  },
  plugins: [
    `gatsby-plugin-react-helmet`, {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-styled-components`, {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [{
          resolve: 'gatsby-remark-code-buttons',
          options: {
            buttonText: `<p>Copy to Clipboard</p>`,
            svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M336 64h-88.6c.4-2.6.6-5.3.6-8 0-30.9-25.1-56-56-56s-56 25.1-56 56c0 2.7.2 5.4.6 8H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 32c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm160 432c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h48v20c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12V96h48c8.8 0 16 7.2 16 16z"></path></svg>`,
            tooltipText: `Copy to Clipboard`,
            toasterText: 'Copied to Clipboard',
            toasterDuration: 5000
          }
        }, {
          resolve: `gatsby-remark-prismjs`
        }]
      }
    }, {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      }
    }, {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require("sass")
      }
    }
    // this (optional) plugin enables Progressive Web App + Offline functionality To
    // learn more, visit: https://gatsby.dev/offline `gatsby-plugin-offline`,
  ]
}

gatsby.browser.js

import './src/styles/documentation.scss';
require("prismjs/themes/prism-okaidia.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")

index.js

import React from "react"

import Layout from "../components/layout"
import SEO from "../components/seo"
import GetStarted from '../docs/get-started.mdx'

const IndexPage = () => (
    <Layout>
      <SEO title="Get Started"/>
      <section class={`documentation`}>
        <GetStarted/>
      </section>
      <div>
        <p>Hallo</p>
      </div>
    </Layout>
)
export default IndexPage

get-started.mdx

# Get started with fluency

```html
<html lang="en" dir="ltr">
    <head><!-- Your head goes here --></head>
    <body id="fluency" class="no-js">
        <div id="mq"></div>
        <div id="screen" class="">
            <script>
                function setMediaQuery() {
                    var element = document.getElementById('mq');
                    var target = document.getElementById('screen');
                    var style = getComputedStyle(element);
                    var mq = style['zIndex'];
                    target.className = ('mq' + mq);
                }
                (function() { setMediaQuery(); })();
                window.addEventListener("resize", function(){ setMediaQuery(); });
            </script>
            <div id="overlays">
                <!-- Your Overlays go here -->
            </div>
            <div id="page-and-offcanvas">
                <div id="offcanvas-left" class="offcanvas left closed">
                    <!-- Your Left Offcanvas goes here -->
                </div>
                <div id="page">
                    <div id="page-background">
                        <!-- Your Page Background goes here -->
                    </div>
                    <div id="page-border-wrapper">
                        <div id="header-and-main">
                            <header id="header">
                                <!-- Your Header goes here -->
                            </header>
                            <main id="main">
                                <!-- Your Main Content goes here -->
                            </main>
                        </div>
                        <footer id="footer">
                            <!-- Your Footer Content goes here -->
                        </footer>
                    </div>
                </div>
                <div id="offcanvas-right" class="offcanvas right closed">
                    <!-- Your Right Offcanvas goes here -->
                </div>
            </div>
        </div>
        <!-- Your Body Scripts go here -->
    </body>
</html>

Console ERROR

Error onLoad

index.js:2177 Warning: Expected `onClick` listener to be a function, instead got a value of `string` type.
    in div (created by MDXCreateElement)
    in MDXCreateElement (at get-started.mdx:24)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (at get-started.mdx:21)
    in MDXContent (at pages/index.js:11)
    in section (at pages/index.js:10)
    in section (at layout.js:182)
    in div (at layout.js:180)
    in div (at layout.js:179)
    in div (at layout.js:177)
    in div (at layout.js:175)
    in div (at layout.js:173)
    in div (at layout.js:171)
    in div (created by Context.Consumer)
    in StyledComponent (created by layout__AppMain)
    in layout__AppMain (at layout.js:170)
    in div (created by Context.Consumer)
    in StyledComponent (created by layout__AppHeaderAndMain)
    in layout__AppHeaderAndMain (at layout.js:164)
    in div (created by Context.Consumer)
    in StyledComponent (created by layout__AppPage)
    in layout__AppPage (at layout.js:162)
    in div (created by Context.Consumer)
    in StyledComponent (created by layout__AppPageAndOffcanvas)
    in layout__AppPageAndOffcanvas (at layout.js:156)
    in div (created by Context.Consumer)
    in StyledComponent (created by layout__App)
    in layout__App (at layout.js:154)
    in Layout (at pages/index.js:8)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in MDXProvider (at wrap-root-element.js:65)
    in MDXScopeProvider (at wrap-root-element.js:64)
    in Unknown
    in Unknown (at wrap-root-element.js:72)
    in StaticQueryStore (at root.js:133)
    in _default (at app.js:67)
__stack_frame_overlay_proxy_console__ @ index.js:2177
warningWithoutStack @ react-dom.development.js:531
warning @ react-dom.development.js:1019
warnForInvalidEventListener @ react-dom.development.js:7652
setInitialDOMProperties @ react-dom.development.js:7741
setInitialProperties @ react-dom.development.js:7951
finalizeInitialChildren @ react-dom.development.js:9479
completeWork @ react-dom.development.js:21094
completeUnitOfWork @ react-dom.development.js:24729
performUnitOfWork @ react-dom.development.js:24705
workLoopSync @ react-dom.development.js:24670
performSyncWorkOnRoot @ react-dom.development.js:24269
scheduleUpdateOnFiber @ react-dom.development.js:23697
updateContainer @ react-dom.development.js:27102
(anonymous) @ react-dom.development.js:27527
unbatchedUpdates @ react-dom.development.js:24432
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27526
render @ react-dom.development.js:27607
(anonymous) @ app.js:67
setTimeout (async)
(anonymous) @ ready.js:32
(anonymous) @ app.js:66
Promise.then (async)
(anonymous) @ app.js:59
Promise.then (async)
(anonymous) @ app.js:23
./.cache/app.js @ app.js:16
__webpack_require__ @ bootstrap:726
fn @ bootstrap:100
0 @ documentation.scss?3e0d:45
__webpack_require__ @ bootstrap:726
(anonymous) @ bootstrap:793
(anonymous) @ bootstrap:793

Error onClick

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.
    at getListener (react-dom.development.js:846)
    at listenerAtPhase (react-dom.development.js:4743)
    at accumulateDirectionalDispatches (react-dom.development.js:4768)
    at traverseTwoPhase (react-dom.development.js:4673)
    at accumulateTwoPhaseDispatchesSingle (react-dom.development.js:4786)
    at forEachAccumulated (react-dom.development.js:695)
    at accumulateTwoPhaseDispatches (react-dom.development.js:4821)
    at Object.extractEvents (react-dom.development.js:5681)
    at extractPluginEvents (react-dom.development.js:868)
    at runExtractedPluginEventsInBatch (react-dom.development.js:880)
    at handleTopLevel (react-dom.development.js:5804)
    at batchedEventUpdates$1 (react-dom.development.js:24400)
    at batchedEventUpdates (react-dom.development.js:1416)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5895)
    at attemptToDispatchEvent (react-dom.development.js:6011)
    at dispatchEvent (react-dom.development.js:5915)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12150)
    at discreteUpdates$1 (react-dom.development.js:24416)
    at discreteUpdates (react-dom.development.js:1439)
    at dispatchDiscreteEvent (react-dom.development.js:5882)
getListener @ react-dom.development.js:846
listenerAtPhase @ react-dom.development.js:4743
accumulateDirectionalDispatches @ react-dom.development.js:4768
traverseTwoPhase @ react-dom.development.js:4673
accumulateTwoPhaseDispatchesSingle @ react-dom.development.js:4786
forEachAccumulated @ react-dom.development.js:695
accumulateTwoPhaseDispatches @ react-dom.development.js:4821
extractEvents @ react-dom.development.js:5681
extractPluginEvents @ react-dom.development.js:868
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5804
batchedEventUpdates$1 @ react-dom.development.js:24400
batchedEventUpdates @ react-dom.development.js:1416
dispatchEventForPluginEventSystem @ react-dom.development.js:5895
attemptToDispatchEvent @ react-dom.development.js:6011
dispatchEvent @ react-dom.development.js:5915
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12150
discreteUpdates$1 @ react-dom.development.js:24416
discreteUpdates @ react-dom.development.js:1439
dispatchDiscreteEvent @ react-dom.development.js:5882

[iamskok]

@arinker thanks for your detailed issue! This plugin doesn't support MDX, but you are more than welcome to submit a PR and I will try to help you along the way. Let me know if you would like to reopen this issue?

[arinker]

@iamskok Thank you for your quick reply and offer to help! Unfortunately we do not have the resources to go deeper into your plugin. Thus we cannot submit a PR and have to live without the plugin for the time being.

[davidkartuzinski]

@arinker thanks for your detailed issue! This plugin doesn't support MDX, but you are more than welcome to submit a PR and I will try to help you along the way. Let me know if you would like to reopen this issue?

Does this mean in order to use the plugin we must only use it with .md files? Is that how the main gatsby site works? What about https://github.com/iamskok/gatsby-mdx-remark-code-buttons-example (I could not get it to work btw)?

If the button will not work with MDX, could you please unequivocally add that to the docs/readme. I literally spent the last five hours trying to get it to work :(

I tried so many things.

Anyway, thank you I will use it on my .md sites, I just can't use it today.

-DK

ps. if you'd like to take a look at how I was trying to get it to work: https://github.com/davidkartuzinski/gatsby-theme-naked-core/tree/code-copy-link

Thanks again.

[iamskok]

@davidkartuzinski thanks, David! The docs were updated. Now there is a link for MDX copy button example as well.

[davidkartuzinski]

@iamskok Thank you for your answer. I am a little confused. I read the docs on gatsby and I don't see any changes or anything about using gatsy-remark-code-buttons with MDX.

I looked at the readme. The readme seems to say that this will NOT work with MDX.

This example repo https://github.com/iamskok/gatsby-mdx-remark-code-buttons-example - does not work.

Does the button work with MDX?

Thank you for your attention, I would love to use your hard work to help my readers.

Thank you.

-DK

[iamskok]

@davidkartuzinski this plugin it’s not working with MDX, but I have referenced an example from Gatsby’s website on how to add a copy button with MDX. gatsbyjs/gatsby#15834

[davidkartuzinski]

@iamskok Thank you! Now I understand. I can now try to figure it out. I really appreciate it. Thank you.