No control for widget 'mdx'.

[whoisryosuke]

1. Installed and changed my Netlify config to use the widget (+ necessary frontmatter setting).
2. Push code to Netlify
3. Admin loads, can view posts, but the body section displays error:

No control for widget 'mdx'.

The preview if enabled also displays:

No preview for widget 'mdx'

Version

MDX Widget: ^0.4.1 Gatsby:

  System:
    OS: macOS 10.14
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 61.0.2
    Safari: 12.0
  npmPackages:
    gatsby: ^2.13.67 => 2.13.67 
    gatsby-image: ^2.2.8 => 2.2.8 
    gatsby-plugin-feed: ^2.3.6 => 2.3.6 
    gatsby-plugin-google-analytics: ^2.1.7 => 2.1.7 
    gatsby-plugin-manifest: ^2.2.5 => 2.2.5 
    gatsby-plugin-mdx: ^1.0.24 => 1.0.24 
    gatsby-plugin-netlify-cms: ^4.1.7 => 4.1.7 
    gatsby-plugin-offline: ^2.2.6 => 2.2.6 
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3 
    gatsby-remark-copy-linked-files: ^2.1.6 => 2.1.6 
    gatsby-remark-prismjs: ^3.3.5 => 3.3.5 
    gatsby-remark-responsive-iframe: ^2.2.4 => 2.2.4 
    gatsby-remark-smartypants: ^2.1.2 => 2.1.2 
    gatsby-source-filesystem: ^2.1.9 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.7.8

Here's my config.yml:

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    description: "KSC blog posts"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
  - name: "pages"
    label: "Pages"
    description: "Main site pages"
    folder: "content/pages"
    extension: "mdx"
    format: "frontmatter"
    widget: "mdx"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "mdx" }

[karolis-sh]

You need to setup the control / preview as this isn't a builtin widget - https://www.netlifycms.org/docs/custom-widgets/#registerwidget

[whoisryosuke]

Thanks, didn't notice that part of the README.

Put in a PR to add Gatsby instructions since the Netlify docs didn't cover the integration: https://github.com/buz-zard/gatsby-mdx/pull/49

[Knaackee]

I did register the widget in my/src/cmd/cms.js file but it doesn't work. I get No preview for widget 'mdx'and No control for widget 'mdx'. Any idea?

import { MdxControl, MdxPreview } from "netlify-cms-widget-mdx
CMS.registerWidget("mdx", MdxControl, MdxPreview)

Thanks in advance!

[karolis-sh]

@Knaackee a full configuration setup would help a little more.

[Knaackee]

Oh iam sorry. It's working now.

[narthur]

I'm having the same problem. I get both errors:

"No control for widget 'mdx'."

"No preview for widget 'mdx'."

cms.js

import CMS from "netlify-cms-app"
import { MdxControl, MdxPreview, setupPreview } from "netlify-cms-widget-mdx"
import {shortcodes} from "."

CMS.registerWidget('mdx', MdxControl, setupPreview({
    components: shortcodes
}))

gatsby-config.js

module.exports = {
    siteMetadata: {
        title: `Gatsby Default Starter`,
        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`,
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `markdown-pages`,
                path: `${__dirname}/src/markdown-pages`,
            }
        },
        {
            resolve: "gatsby-plugin-page-creator",
            options: {
                path: `${__dirname}/src/markdown-pages`,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            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-mdx`,
            options: {
                defaultLayouts: {
                    default: require.resolve(`./src/page-templates/default-page.template.js`),
                },
                extensions: [`.mdx`, `.md`]
            },
        },
        {
            resolve: `gatsby-plugin-netlify-cms`,
            options: {
                modulePath: `${__dirname}/src/cms/cms.js`, // for custom preview in the Netlify CMS
            },
        },
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
    ],
}

config.yml

backend:
  name: git-gateway
  repo: avorg/audioverse-public-website
  branch: gatsby
  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: static/img
public_folder: /img
local_backend: true

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean"}
      - {label: "Featured Image", name: "featuredimage", widget: image}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    folder: "src/markdown-pages"
    create: true
    slug: "{{slug}}"
    format: "frontmatter"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "page"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Featured Image", name: "featuredimage", widget: "image"}
      - {label: "Body", name: "body", widget: "mdx"}

[karolis-sh]

@narthur well your setup should be fine, though the error the error indicates that the CMS.registerWidget wasn't even called. I suggest checking if the file get's executed and if the error persists maybe make a repo to test the issue.

[narthur]

@karolis-sh Thanks for taking a look! I'm pretty new to Gatsby. What's the easiest way to ensure cms.js is getting executed?

[karolis-sh]

@narthur I guess just add a console.log statement and check the terminal when starting the Gatsby app - that should indicate that you provided the correct modulePath value

[narthur]

Yeah, console.log is not showing up when I reload the gatsby app. I guess I'll work on debugging why the page isn't getting executed.

[narthur]

Just confirmed that the file is getting run. I imported some CSS in cms.js and it was applied to the preview. But the errors persist.