NextJS (src/pages/Admin.tsx) 'Invariant is not defined' error.
- 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
Assessment
This issue has not been assessed yet.