This is how I mount the CMS.

admin.js

/** @format */

import React from "react";
import _ from "lodash";
import { identity } from "../apollo/initApollo";

import { questionStyles } from "../../components/Question";
import { appStyles } from "../../pages/_app";
import MetadataControl from "../../components/MetadataControl";
import ActivityPreview from "../../components/ActivityPreview";
import PagePreview from "../../components/PagePreview";
import registerIdControl from "../../components/IdControl";

if (process.browser) {
  window.CMS_MANUAL_INIT = true;
  window.netlifyIdentity = identity;
}

function resolveScopedStyles(scope) {
  return {
    className: scope.props.className,
    styles: scope.props.children
  };
}

const styles = resolveScopedStyles(
  <React.Fragment>
    <style jsx global>
      {`
        /* This is used for previewing content in the cms not sure why nc- got lost */
        .nc-widgetPreview p {
          margin: 1em 0px !important;
        }

        /* Hack to display Coursebuilder */
        h1.nc-collectionPage-sidebarHeading:after {
          content: "Coursebuilder";
          font-size: 23px;
        }
        h1.nc-collectionPage-sidebarHeading {
          font-size: 0;
        }
      `}
    </style>
    {questionStyles()}
    {appStyles()}
  </React.Fragment>
);

let MarkdownPreview = null;
let CMS = null;
export class CMSContainer extends React.Component {
  componentWillMount() {
    if (process.browser) {
      const {
        init,
        default: CMSImport
      } = require("netlify-cms/dist/netlify-cms.js");
      // require("netlify-cms/dist/cms.js");
      // require("netlify-cms/dist/netlify-cms.js");

      CMS = CMSImport;

      const backend = JSON.parse(process.env.CMS_BACKEND);
      init({
        config: {
          display_url: window.location.href.replace(
            /(^https?:\/\/[^\/]*)(\/.*)?$/,
            (all, url) => url
          ),
          backend
        }
      });
      _.forEach(styles.styles, style => {
        const styles = style.props.css;
        CMS.registerPreviewStyle(styles, { raw: true });
      });
      CMS.registerPreviewStyle(
        "//fonts.googleapis.com/icon?family=Material+Icons"
      );
      CMS.registerPreviewTemplate("activity", ActivityPreview);
      CMS.registerPreviewTemplate("page", PagePreview);
      CMS.registerPreviewTemplate("article", PagePreview);
      CMS.registerWidget("metadata", MetadataControl);
      registerIdControl(CMS);
    }
  }

  render() {
    return (
      <React.Fragment>
        <div id="nc-root" key="cms" />
        {styles.styles}
      </React.Fragment>
    );
  }
}

export default CMSContainer;

IdControl.js

/** @format */
import React from "react";
import uuidv1 from "uuid/v1";

// ... using predefined DNS namespace (for domain names)

export const uuid = () => {
  return uuidv1();
};

function registerIdControl(CMS) {
  if (!CMS) {
    return;
  }
  const stringWidget = CMS.getWidget("string");
  CMS.registerWidget(
    "id",
    class IdControl extends React.Component {
      constructor(props, context) {
        super(props, context);
      }
      render() {
        let { value, onChange } = this.props;
        if (!value) {
          value = uuidv1();
          onChange(value);
        }
        const Control = stringWidget.control;
        return <Control {...this.props} value={value} />;
      }
    },
    stringWidget.preview
  );
}

export default registerIdControl;