decaporg / decaporg/decap-cms

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

Open
#4,676 10 comments 13 reactions 0 assignees View on GitHub
area: 3rd party dependencies pinned type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**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

;
}
export default AdminPage;
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.