TypeError: Cannot read property 'auth' of undefined

ianoc90 commented 3 years ago

Describe the bug The Preview Template crashes when I open it after deploying changes to netlify.

To Reproduce Deployed to netlify, using NextJS, with netlify identity authentication.

It is booted through the admin.js route.

import dynamic from "next/dynamic";
import {
  files as homeFiles,
  registerTemplate as registerHomeTemplate,
} from "modules/Home/cms";
import Head from "next/head";
import netlifyIdentity from "netlify-identity-widget";

const config = {
  load_config_file: false,
  cms_manual_init: true,
  backend: {
    name: "git-gateway",
    branch: "develop",
  },
  media_folder: "public/img",
  public_folder: "img",
  // publish_mode: "editorial_workflow",
  collections: [
    {
      name: "config",
      label: "General",
      format: "json",
      files: [homeFiles],
    },
  ],
};

const CMS = dynamic(
  () =>
    import("netlify-cms-app").then((cms) => {
      if (
        location.hostname === "localhost" ||
        location.hostname === "127.0.0.1"
      ) {
        config.backend.name = "test-repo";
      }

      cms.init({ config });

      cms.registerPreviewStyle("/tailwind-cms-template.css");

      registerHomeTemplate(cms);

      netlifyIdentity.init();
    }),
  { ssr: false, loading: () => <p>Loading...</p> }
);

const AdminPage = () => {
  return (
    <>
      <Head>
        <title>Website | Admin</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <CMS />
    </>
  );
};

export default AdminPage;

The template Logic looks like this:

import React from "react";
import PropTypes from "prop-types";
import { useEffect } from "react";
import Home from "../Home";

export const usePreviewFont = (document) => {
  useEffect(() => {
    const link = document.createElement("link");
    link.href =
      "https://fonts.googleapis.com/css2?family=Comfortaa&display=swap";
    link.rel = "stylesheet";

    document.head.appendChild(link);
  }, []);
};

const HomePagePreview = ({ entry, document }) => {
  const desc = entry.getIn(["data", "description"]);
  const infoSections = entry.getIn(["data", "infoSections"]);

  usePreviewFont(document);

  return <Home description={desc} infoSections={infoSections} />;
};

HomePagePreview.propTypes = {
  entry: PropTypes.shape({
    getIn: PropTypes.func,
  }),
  getAsset: PropTypes.func,
};

export default HomePagePreview;

export const files = {
  label: "Home Page",
  name: "home",
  file: "src/pages/indexConfig.json",
  fields: [
    {
      label: "Coming Soon Text",
      name: "description",
      widget: "string",
    },
  ],
};

export const registerTemplate = (CMS) => {
  CMS.registerPreviewTemplate("home", PreviewTemplate);
};

Expected behavior Preview Template to load in side bar.

Screenshots

Applicable Versions:

Netlify CMS version: netlify-cms-app@2.14.21
Git provider: git-gateway
Browser version: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

CMS configuration

publish_mode: simple
load_config_file: false
cms_manual_init: true
backend:
  name: git-gateway
  branch: develop
media_folder: public/img
public_folder: img
collections:
  - name: config
    label: General
    format: json
    files:
      - label: Home Page
        name: home
        file: src/pages/indexConfig.json
        fields:
          - label: Coming Soon Text
            name: description
            widget: string
    publish: true
    sortable_fields:
      - commit_date
      - commit_author
    view_filters: []
    view_groups: []
slug:
  encoding: unicode
  clean_accents: false
  sanitize_replacement: "-"

Additional Context Preview template booted very well on my local environment using test-repo backend.

Let me know if there is anything else needed. Thanks in advance for the help :-)

smashercosmo commented 3 years ago

Let me know if there is anything else needed

The thing that's always needed is a reduced runnable example, where your issue can be reliably reproduced. If example is not provided, there is a very little chance, that your issue will be addressed.

ianoc90 commented 3 years ago

The thing that's always needed is a reduced runnable example, where your issue can be reliably reproduced. If example is not provided, there is a very little chance, that your issue will be addressed.

OK no problems, I'll look into putting something together. Thanks

ianoc90 commented 3 years ago

Closing this as I don't think its actually an issue with netlify-cms. Seems to be an issue with the Preview Template I set up. I was using NextJS Link in my preview template, thats what was throwing the error and breaking the template. If I use a standard link then the preview template works well. Still not sure why this was happening but I can work around this for now. If anyone wants a more detailed example out of curiosity then I'm happy to help but.

decaporg / decap-cms

TypeError: Cannot read property 'auth' of undefined #5101