AlessioGr / payload-plugin-lexical

Extends payload CMS with Meta's lexical RichText editor - a much more advanced and customizable richtext editor
MIT License
144 stars 6 forks source link

Invalid hook call on minimal example #6

Closed R0bson closed 1 year ago

R0bson commented 1 year ago

Hey @AlessioGr I tried running your plugin as minimal example with empty CMS, but it fails right away with CMS-unrelated error. Are you able to provide some hints how to run it?

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at LexicalRichTextFieldComponent2 (http://localhost:3020/cms/admin/main.js:253596:30)
    at CheckForCondition (http://localhost:3020/cms/admin/main.js:416618:24)
    at Suspense
    at Field
    at RenderCustomComponent (http://localhost:3020/cms/admin/main.js:114979:13)
    at div
    at RenderFields (http://localhost:3020/cms/admin/main.js:105638:13)
    at div
    at http://localhost:3020/cms/admin/main.js:100493:13
.....
AlessioGr commented 1 year ago

Hey @AlessioGr I tried running your plugin as minimal example with empty CMS, but it fails right away with CMS-unrelated error. Are you able to provide some hints how to run it?

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at LexicalRichTextFieldComponent2 (http://localhost:3020/cms/admin/main.js:253596:30)
    at CheckForCondition (http://localhost:3020/cms/admin/main.js:416618:24)
    at Suspense
    at Field
    at RenderCustomComponent (http://localhost:3020/cms/admin/main.js:114979:13)
    at div
    at RenderFields (http://localhost:3020/cms/admin/main.js:105638:13)
    at div
    at http://localhost:3020/cms/admin/main.js:100493:13
.....

could you share the project with me? Will check that out!

R0bson commented 1 year ago

Sure thing! https://github.com/R0bson/payload-lexical-playground

AlessioGr commented 1 year ago

Hey @AlessioGr I tried running your plugin as minimal example with empty CMS, but it fails right away with CMS-unrelated error. Are you able to provide some hints how to run it?

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at LexicalRichTextFieldComponent2 (http://localhost:3020/cms/admin/main.js:253596:30)
    at CheckForCondition (http://localhost:3020/cms/admin/main.js:416618:24)
    at Suspense
    at Field
    at RenderCustomComponent (http://localhost:3020/cms/admin/main.js:114979:13)
    at div
    at RenderFields (http://localhost:3020/cms/admin/main.js:105638:13)
    at div
    at http://localhost:3020/cms/admin/main.js:100493:13
.....

could you share the project with me? Will check that out!

Hm your project structure is a little weird. You pasted the entire lexical plugin project into your payload-plugin-lexical folder. Did you install the npm dependencies twice?

Instead, just paste everything from the src folder, and add the same dependencies which the payload plugin lexical project uses into your main package.json.

Should look like this: Code 2023-03-25 at 15 15 13@2x