NextJS (src/pages/Admin.tsx) 'Invariant is not defined' error.

[emileswain]

Describe the bug

Using npx netlify-cms-proxy-server with local_backend = true in the config.yml and building the admin page with NextJS throws the error below.

main.js:47276 Warning: Failed prop type: invariant is not defined
    at x (http://localhost:3000/_next/static/chunks/1.js:468:66487)
    at l (http://localhost:3000/_next/static/chunks/1.js:460:53983)
    at http://localhost:3000/_next/static/chunks/1.js:426:204302
    at Connect(Component) (http://localhost:3000/_next/static/chunks/1.js:305:26246)
    at c (http://localhost:3000/_next/static/chunks/1.js:305:24168)

This only occurs in certain situations:

• [netlify-cms-proxy-server] This occurs when using localhost:3000/admin
• [netlify-cms-proxy-server] This does not occur when using localhost:3000/admin/index.html
• [netlify.com] This does not occur when using https://angry-ride-7f53ed.netlify.app:3000/admin/index.html
• [netlify.com] This does not occur when using https://angry-ride-7f53ed.netlify.app:3000/admin

To Reproduce

1. example project here. https://github.com/emileswain/netlify-cms-nextjs-demo
2. yarn run cms
3. yarn run dev
4. goto localhost:3000/admin/index.html see no error
5. goto localhost:3000/admin see error

Expected behavior

Should not see any errors.

Screenshots

Applicable Versions:

netlify-cms-app 2.14.3 netlify-cms-core 2.36.3

CMS configuration

https://github.com/emileswain/netlify-cms-nextjs-demo/blob/main/src/cms/cms-config.js

Additional context

https://github.com/emileswain/netlify-cms-nextjs-demo https://angry-ride-7f53ed.netlify.app/

The example is set to only show this particualar error. however when adding custom widgets it shows multiple other similar errors. But figure they might go away if this error is resolved.

admin.tsx

import dynamic from 'next/dynamic';
import config from '../cms/cms-config'
// @ts-ignore
const AdminPage = dynamic(() => import('netlify-cms-app').then((cms:any) => {
    if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
                 config.local_backend = true;
    cms.init({config});
}), {ssr: false});

export default AdminPage

Alternative admin.tsx

i've also tried this

import React, {useEffect, useLayoutEffect} from "react";
import config from '../cms/cms-config'
const AdminPage = () => {

    // use of import ('netlify-cms-app') has been the only way to get Nextjs to gen the admin page
    // without throwing window undefined error.
    //
    // I also don't know how to properly type the config file.
    useEffect(() => {
        (async () => {

            const CMS = (await import('netlify-cms-app')).default ;

            // i'm using local netlify cms server for testing.
            if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
                 config.local_backend = true;

            // how to type this.
            // @ts-ignore
            CMS.init({config});
        })();
    }, []);

    return <div />;
}
export default AdminPage;

[emileswain]

So i was wondering if there was a way to run netlifycms locally so i could try and step through the traces/logs with source maps rather than obfuscated code. I through i'd be able to checkout https://github.com/emileswain/netlify-cms run it locally (which finally ran after a couple of attempts) and configure my projects config.yml with local_backend: url:localhost setting to use this instance and at least through up some additional logs. I'm clearly not understanding how the setup is supposed to work.

[emileswain]

In addition i've narrowed down a similar issue with the same error message.

react_devtools_backend.js:2430 Warning: Failed prop type: invariant is not defined
    at p
    at StyledP
    at M (http://localhost:3000/_next/static/chunks/1.js:786:3416)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at div

To Reproduce

1. create new page
2. add hello
3. publish/save
4. reload page.
5. see error.

Additional notes: Note: if you instead add a header i.e. # My header the error message changes to

Warning: Failed prop type: invariant is not defined
    at h1
    at StyledH1
    at D (http://localhost:3000/_next/static/chunks/1.js:786:3602)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)

Does the same happen with Multiple elements? If you add multiple elements only the first is reported with a warning

So if i have standard text and a header then swapping the order will only return one error, which ever is first.

First item is list Item is list i.e. 1. 1

react_devtools_backend.js:2430 Warning: Failed prop type: invariant is not defined
    at p
    at StyledP
    at M (http://localhost:3000/_next/static/chunks/1.js:786:3416)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at li
    at StyledLi
    at I (http://localhost:3000/_next/static/chunks/1.js:786:3458)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at ol
    at StyledOl
    at K (http://localhost:3000/_next/static/chunks/1.js:786:4280)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:155338)
    at div
    at t (http://localhost:3000/_next/static/chunks/1.js:338:160438)
    at t (http://localhost:3000/_next/static/chunks/1.js:338:194062)
    at div

[emileswain]

Narrowed it down as far as possible (for me anyway). Looks like its something to do with proptype validation. I guess some configuration in nextjs is interfereing with this is dealt with some how.

[AaronPowell96]

Narrowed it down as far as possible (for me anyway). Looks like its something to do with proptype validation. I guess some configuration in nextjs is interfereing with this is dealt with some how.

I dont think thisis is a NextJS specific issue. I am manually generating my static content and have the same issue, same error etc :)

[johncip]

Am seeing this as well with a git-gateway backend and a preview class that just renders an empty div.

[dustinlacewell]

I am getting this as well, I posted additional information in #6101

[Landoooooo]

Am seeing this as well with a git-gateway backend and a preview class that just renders an empty div.

I'm facing this issue now as well, were you able to resolve it @johncip?

[stiwwelll]

Same here. Any news on that?

[ashleykolodziej-moodys]

Just wanted to note that I am seeing this as well and it is not NextJS-specific, since my setup is using Docusaurus.

[katrynmc]

The issue is with react-immutable-proptypes but the package appears to be unmaintained https://github.com/HurricaneJames/react-immutable-proptypes/pull/59