Netlify-cms: [Next JS] import CMS from 'netlify-cms' causes `ReferenceError: window is not defined` error

[anishd19]

Describe the bug

importing CMS on a nextjs page does not work as expected. It errors out with ReferenceError: window is not defined on opening the page.
To Reproduce

In a Next JS project:

Create pages/admintest.js

add import CMS from 'netlify-cms' to the file.

open localhost:3000/admintest in the browser

See error ReferenceError: window is not defined

Expected behavior

The CMS page should load without error
Screenshots

Applicable Versions:

• Netlify CMS version: ^2.10.43
• Node.JS version: 12.16.1

CMS configuration

NA

Additional context

[erezrokah]

Hi @anishd19, when working with site generators and importing the CMS as a module (not from CDN), you should use netlify-cms-app, e.g.

import CMS from 'netlify-cms-app'

CMS.init()

[anishd19]

Hi, I tried this as well. Still the same error.

Using next/dynamic to wrap the import statement did solve this issue. But, the registry was not exposed in that case. I am looking to register a widget using CMS.registerWidget.

[anishd19]

I created pages/admintest.js with the following content:

import CMS from 'netlify-cms-app'
CMS.init()

Result: ReferenceError: window is not defined

[erezrokah]

Can you share your repo? I think you might need to use promise like API with next/dynamic as it won't resolve the CMS synchronously

[anishd19]

Hi, I have recreated the working scenario in this repo below.

https://github.com/anishd19/with-netlify-cms/blob/master/pages/admintest.js

@erezrokah

[erezrokah]

Hi @anishd19, sorry for the late reply.
I think you need to do something like this:

import dynamic from 'next/dynamic';

const CMS = dynamic(() => import('netlify-cms-app').then((cms) => {
    cms.init()
}), {ssr: false});

export default CMS

[anishd19]

Ok thanks @erezrokah. I'll try that and get back to you.

[anishd19]

No, that doesn't fix it either. But anyway I went on with another solution as in this repo: https://github.com/Jinksi/netlify-cms-react-starter/blob/master/cms/webpack.config.js . basically, I have a separate webpack build system for my cms/cms.js which outputs cms.bundle.js into the public/admin folder of the nextjs app. This is not an ideal solution though. got my project to progress as of now. @erezrokah

[erezrokah]

That actually makes sense as this is what the Gatsby CMS plugin does.
Closing this issue, and if you have the time and want to share you work we would a contribution to the examples page: https://www.netlifycms.org/docs/examples/

[karesztrk]

I made this working by using the following

import dynamic from 'next/dynamic';
const config = {
 YOUR_CMS_CONFIG
};
const CMS = dynamic(
  () =>
    import('netlify-cms-app').then((cms) => {
      cms.init({ config });
    }),
  { ssr: false, loading: () => <p>Loading Admin...</p> },
);

const Admin: React.FC = () => {
  return <CMS />;
};
export default Admin;