Invalid hook call on minimal example

[R0bson]

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]

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]

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

[AlessioGr]

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:

[AlessioGr]

@R0bson just an update: you can install the plugin via npm now! Should also work a lot smoother :)

[roydigerhund]

I forked the repo and wanted to modify it a bit. In order to test my changes I used "yarn link" but I'm getting the same error. Any ideas why?

[AlessioGr]

You're getting that same "Invalid hook call. Hooks can only be called inside of the body of a function component" error?

That's weird, as it's definitely been fixed. Haven't ever used yarn link on that plugin, though. Does it only happen when using yarn link, or when running the demo folder as well?

[AlessioGr]

Oh, never mind - I've mixed up that error with another error. In that case, I'm really not sure why this happens. Must be something to do with yarn link.

A safer way to test it would be to just publish any changes you want to test into your own GitHub repository (make sure to build it first & publish the dist folder as well).
That way, you can easily install it in your project using yarn add roydigerhund/payload-plugin-lexical

[roydigerhund]

Thanks, that worked. Linking would be handier for development but I'm just making a few changes, so it's fine 👍.

[AlessioGr]

I do agree - that's why, for quick iterations & debugging, I'd either work with the demo project or copy&paste the plugin straight into your app.

If you do get yarn link to work though, let me know how you did it!