Error Gatsby + TinaCMS - The `cms` prop must be an instance of `TinaCMS`

Hello everyone,

I am trying to setup Gatbsy with TinaCMS and i am getting this error

Error in function Mn in ./node_modules/tinacms/build/index.js:1

The `cms` prop must be an instance of `TinaCMS`.

Steps to reproduce

  1. npm init gatsby
    No CMS
    styled-components

  2. npm i ‘gatsby-plugin-tinacms’

  3. add plugin to ‘gatsby-config.js’ (as shown in npmjs.com)

{
      resolve: "gatsby-plugin-tinacms",
      options: {
        enabled: process.env.NODE_ENV !== "production",
        sidebar: {
          position: "displace",
        },
        plugins: [
          //...
        ],
      },
    },
  1. npm i path-browserify

  2. add fallback to gatsby-node.js

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        path: require.resolve("path-browserify"),
      },
    },
  });
};
  1. npm start

I also tried ‘gatsby-starter-blog’ following every step from the tutorial

I’m experiencing the same issue, So far, after debugging the source code for ‘gatsby-plugin-tinacms’, the problems seems to be caused by wrapRootElement getting fired before onClientEntry. Which means that window.tinacms will be undefined by the time TinaProvider is mounted. I have no idea why this happens.

Here is my workaround

    import * as React from 'react'
    import { TinaProvider, TinaCMS } from 'tinacms'

    export const wrapRootElement = (
      { element },
      options
    ) => {
      window.tinacms = new TinaCMS({
        enabled: options.enabled,
        sidebar: options.sidebar,
        toolbar: options.toolbar,
      });
      return <TinaProvider cms={window.tinacms}>{element}</TinaProvider>
    }
  • add these snippets to your gatsby-config plugins
     const GATSBY_PLUGIN_TINACMS_OPTIONS = {
      sidebar: {
        position: 'fixed',
      },
    }
  {
      resolve: 'gatsby-plugin-tinacms',
      options: {
        ...GATSBY_PLUGIN_TINACMS_OPTIONS,
        manualInit: true,
        plugins: [],
      },
    },
    {
      resolve: 'my-tinacms-plugin',
      options: {
        ...GATSBY_PLUGIN_TINACMS_OPTIONS,
        plugins: [
              //...
         ],
      },
    }
1 Like

I’m running into the same issue. Any official fix from the TinaCMS crew?

Thanks crownie. I’ve implemented what you described and am no longer getting The ‘cms’ prop must be an instance of ‘TinyCMS’, but now I’m getting Cannot read property ‘writeToDisk’ of undefined.

WriteToDisk is on the gatsby-tinacms-git used by gatsby-tinacms-json. By chance, are you using these plugins and did you resolve this issue? Thanks in advance for any help you can provide.