Front-end crashes when trying to load the CKEditor in latest Strapi v4.0.4

[bramdeba]

Bug report

Describe the bug

I'm trying to edit a page with dynamic zones in the 'Content Manager'. Some components within a dynamic zone can be clicked, and expand when clicked to show the component fields. Components with the CKEditor however are triggering the front-end to crash. The entire page turns white and we get 3 errors in the developer console:

main.9eeb4fd0.js:2 TypeError: Cannot read properties of undefined (reading 'components')
    at t.default (main.9eeb4fd0.js:2)
    at c (main.9eeb4fd0.js:2)
    at la (main.9eeb4fd0.js:2)
    at $s (main.9eeb4fd0.js:2)
    at jl (main.9eeb4fd0.js:2)
    at Cl (main.9eeb4fd0.js:2)
    at Ml (main.9eeb4fd0.js:2)
    at wl (main.9eeb4fd0.js:2)
    at main.9eeb4fd0.js:2
    at t.unstable_runWithPriority (main.9eeb4fd0.js:2)

main.9eeb4fd0.js:2 Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop
    at t.n.render (3706.c60e5bcc.chunk.js:2)
    at Qa (main.9eeb4fd0.js:2)
    at Ya (main.9eeb4fd0.js:2)
    at $s (main.9eeb4fd0.js:2)
    at jl (main.9eeb4fd0.js:2)
    at Cl (main.9eeb4fd0.js:2)
    at Ml (main.9eeb4fd0.js:2)
    at wl (main.9eeb4fd0.js:2)
    at main.9eeb4fd0.js:2
    at t.unstable_runWithPriority (main.9eeb4fd0.js:2)

Uncaught Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop
    at t.n.render (3706.c60e5bcc.chunk.js:2)
    at Qa (main.9eeb4fd0.js:2)
    at Ya (main.9eeb4fd0.js:2)
    at $s (main.9eeb4fd0.js:2)
    at jl (main.9eeb4fd0.js:2)
    at Cl (main.9eeb4fd0.js:2)
    at Ml (main.9eeb4fd0.js:2)
    at wl (main.9eeb4fd0.js:2)
    at main.9eeb4fd0.js:2
    at t.unstable_runWithPriority (main.9eeb4fd0.js:2)

Steps to reproduce the behavior

1. Go to 'Content Manager'
2. Click on a page with a dynamic zone
3. Scroll down and try to expand components that have a rich text field within this dynamic zone
4. See error

Expected behavior

I expect to see the form including the CKEditor for this component rendered, with all fields for this component type.

Screenshots

This screencast shows the problem:

Definitely let me know if you need anything else.

### System

- Node.js version: v16
- NPM version: 8.1.3
- Yarn version: 1.22.17
- Strapi version: v4.0.4
- Database: PostgreSQL
- Operating system: Linux/MacOS

### Additional context

The problem occurs both locally and when built/deployed to Google App Engine.

[shihanjun19]

same issue

[vinayg-cp]

Same issue faced.
Anybody else found any solution for this?

[olyphotographer]

same issue, Strapi V4.05/6/7

[Heila-Almogren]

Just in case someone faces this in the future, I faced this error few days ago and noticed a warning that some peer dependencies were missing so I installed them and the error was gone, so this might work for you 👍🏼
I don't recall which ones exactly were missing for me but check this list, find the ones missing in your project and add them to your package.json then run npm install:
"@strapi/icons": "^0.0.1-alpha.4",
"@strapi/plugin-i18n": "4.0.5",
"@strapi/plugin-users-permissions": "4.0.5",
"@strapi/strapi": "4.0.5",
"formik": "^2.2.9",
"immer": "^9.0.6",
"qs": "^6.10.1",
"react-router-dom": "^5.3.0",
"react-select": "^4.3.1",
"sqlite3": "5.0.2",
"styled-components": "^5.3.3"

[philohelp]

Problem solved here (V.4.07).
1- I updated / added the above listed dependencies (dunno if this was really the problem): I deleted node-modules and yarn-lock then yarn
2- I ran yarn strapi build to rebuild the admin

[kaansan]

It works with strapi 4.1.3 latest right now. The problem is MediaLib component in this plugin with previous strapi versions.
const { components } = useLibrary(); this hook probably throws an error inside Component which crashes the strapi.
I've added this info right here, hope it will be helpful for future users.

[roslovets]

Thank you all for investigation.
I can confirm, that plugin v2.1.0-rc.1 works good with Strapi v4.1.5