React 17 and NextJS 12 Fails to install

[vimcat]

Unable to install as normal under React 17. When forcing it, it breaks the page:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'm'.

import dynamic from 'next/dynamic'
import {
  CreatableSelectControl,
  CreatableSelectPreview
} from 'netlify-cms-widget-create-select'

const CMS = dynamic(
  () =>
    import('netlify-cms-app').then(cms => {
      cms.init()
      cms.registerWidget(
        'create-select',
        window.CreatableSelectControl,
        window.CreatableSelectPreview
      )
    }),
  {
    ssr: false
  }
)

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

[Andful]

Can you try to dynamically importing CreatableSelectControl and CreatableSelectPreview with the dynamic function?
I suspect next.js does not import the create-select elements on the front-end but only on the backend while you are trying to render CMS on the frontend.I suspect that is why window.CreatableSelectControl is undefined. Do you have a repo with this setup?

[Andful]

Just so it is clear for you I would do something along these lines:

const CMS = dynamic(
  async () => {
    const [
      CMS,
      {
        CreatableSelectControl,
        CreatableSelectPreview
      }
    ] = await Promise.all(
      [
        import('netlify-cms-app'),
        import('netlify-cms-widget-create-select')
      ]
    );
    CMS.init()
    CMS.registerWidget(
      'create-select',
      CreatableSelectControl,
      CreatableSelectPreview
    )
    return CMS
  }, {
    ssr: false
  }
)

[vimcat]

Thank you, that fixed the loading issue. Now I'm seeing this:

TypeError: Cannot read properties of undefined (reading 'scrollHeight')

Call Stack
t.value
node_modules/netlify-cms-widget-create-select/dist/index.js (10:209198)

[Andful]

I think it is connected with this issue.
While it might be a good idea for me to update my dependencies.