[Bug] Error: Adding different instances of a keyed

coderdiaz commented 2 years ago

Currently, I'm using the strapi-tiptap-editor@0.7.14 on Strapi 4.3.3 and isn't works. I'm having this internal issue:

coderdiaz commented 2 years ago

I fix the issue in my strapi server removing the yarn.lock and creating a new file to force install correct dependencies but I think the issue is happening in the last version 0.8.0.

dasmikko commented 2 years ago

Is the issue still happening in the latest version 0.9.0?

jibin2706 commented 2 years ago

Is the issue still happening in the latest version 0.9.0?

yes

soubhagya-peppercontent commented 2 years ago

Is the issue still happening in the latest version 0.9.0?

yes

+

dasmikko commented 2 years ago

Hmm, I can't seem to reproduce this issue. I'd love to fix this, but this one is a tough one.

jibin2706 commented 2 years ago

I'm getting this error when I try to create a new entry where the editor field is present. If the editor already has some text then it doesn't give any error.

Strapi Version - 4.3.6 Plugin Version - 0.9.0

Screenshot 2022-09-22 at 12 59 10

jibin2706 commented 2 years ago

Better logs, I debugging it

Edit: This is different bug

react-dom.development.js?61bb:14997 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    at renderWithHooks (react-dom.development.js?61bb:14997:1)
    at updateFunctionComponent (react-dom.development.js?61bb:17356:1)
    at beginWork (react-dom.development.js?61bb:19063:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
    at beginWork$1 (react-dom.development.js?61bb:23964:1)
    at performUnitOfWork (react-dom.development.js?61bb:22776:1)
    at workLoopSync (react-dom.development.js?61bb:22707:1)
    at renderRootSync (react-dom.development.js?61bb:22670:1)
renderWithHooks @ react-dom.development.js?61bb:14997
updateFunctionComponent @ react-dom.development.js?61bb:17356
beginWork @ react-dom.development.js?61bb:19063
callCallback @ react-dom.development.js?61bb:3945
invokeGuardedCallbackDev @ react-dom.development.js?61bb:3994
invokeGuardedCallback @ react-dom.development.js?61bb:4056
beginWork$1 @ react-dom.development.js?61bb:23964
performUnitOfWork @ react-dom.development.js?61bb:22776
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
eval @ react-dom.development.js?61bb:11327
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:11322
flushSyncCallbackQueue @ react-dom.development.js?61bb:11309
flushPassiveEffectsImpl @ react-dom.development.js?61bb:23620
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
flushPassiveEffects @ react-dom.development.js?61bb:23447
eval @ react-dom.development.js?61bb:23324
workLoop @ scheduler.development.js?3069:417
flushWork @ scheduler.development.js?3069:390
performWorkUntilDeadline @ scheduler.development.js?3069:157
react-dom.development.js?61bb:20085 The above error occurred in the <WysiwygContent> component:

    at WysiwygContent (webpack-internal:///39465:155:3)
    at Wysiwyg (webpack-internal:///39465:79:5)
    at GenericInput (webpack-internal:///./lib/src/components/GenericInput/index.js:55:27)
    at Inputs (webpack-internal:///99066:65:3)
    at eval (webpack-internal:///16904:29:36)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at GridItem (webpack-internal:///./src/Grid/GridItem.js:43:19)
    at div
    at I (webpack-internal:///78384:3:19689)
    at Grid (webpack-internal:///./src/Grid/Grid.js:40:19)
    at div
    at I (webpack-internal:///78384:3:19689)
    at eval (webpack-internal:///./src/Stack/Stack.js:53:26)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at eval (webpack-internal:///./src/Stack/Stack.js:53:26)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at GridItem (webpack-internal:///./src/Grid/GridItem.js:43:19)
    at div
    at I (webpack-internal:///78384:3:19689)
    at Grid (webpack-internal:///./src/Grid/Grid.js:40:19)
    at div
    at I (webpack-internal:///78384:3:19689)
    at ContentLayout (webpack-internal:///./src/Layout/ContentLayout.js:12:23)
    at main
    at I (webpack-internal:///78384:3:19689)
    at Main (webpack-internal:///./src/Main/Main.js:27:25)
    at form
    at EditViewDataManagerProvider (webpack-internal:///23986:82:3)
    at CollectionTypeFormWrapper (webpack-internal:///93984:78:38)
    at EditView (webpack-internal:///31450:102:3)
    at Permissions (webpack-internal:///3868:44:166)
    at EditViewLayoutManager (webpack-internal:///4664:62:18)
    at Route (webpack-internal:///62898:470:29)
    at Switch (webpack-internal:///62898:676:29)
    at ErrorBoundary (webpack-internal:///66730:40:35)
    at CollectionTypeRecursivePath (webpack-internal:///22601:41:37)
    at Route (webpack-internal:///62898:470:29)
    at Switch (webpack-internal:///62898:676:29)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at Layout (webpack-internal:///./src/Layout/Layout.js:26:23)
    at App (webpack-internal:///85544:54:92)
    at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///85544:120:81)
    at Route (webpack-internal:///62898:470:29)
    at Switch (webpack-internal:///62898:676:29)
    at Suspense
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at AppLayout (webpack-internal:///24448:30:22)
    at DndProvider (webpack-internal:///97668:41:23)
    at Admin (webpack-internal:///82186:73:3)
    at PluginsInitializer (webpack-internal:///10850:21:102)
    at RBACProvider (webpack-internal:///65772:22:25)
    at AuthenticatedApp (webpack-internal:///69754:55:107)
    at Route (webpack-internal:///62898:470:29)
    at PrivateRoute (webpack-internal:///93789:48:29)
    at Switch (webpack-internal:///62898:676:29)
    at TrackingProvider
    at Suspense
    at App (webpack-internal:///30439:83:100)
    at Router (webpack-internal:///62898:99:30)
    at BrowserRouter (webpack-internal:///6113:67:35)
    at NotificationsProvider (webpack-internal:///./lib/src/providers/NotificationsProvider/index.js:24:23)
    at Notifications (webpack-internal:///46176:24:26)
    at GuidedTourProvider (webpack-internal:///./lib/src/providers/GuidedTourProvider/index.js:19:23)
    at GuidedTour (webpack-internal:///89871:30:23)
    at OverlayBlockerProvider (webpack-internal:///73445:46:35)
    at AutoReloadOverlayBlockerProvider (webpack-internal:///68554:39:45)
    at LocalesProvider (webpack-internal:///32885:16:28)
    at IntlProvider (webpack-internal:///51518:83:47)
    at LanguageProvider (webpack-internal:///44796:27:29)
    at LibraryProvider (webpack-internal:///./lib/src/providers/LibraryProvider/index.js:19:23)
    at StrapiAppProvider (webpack-internal:///./lib/src/providers/StrapiAppProvider/index.js:19:23)
    at ConfigurationsProvider (webpack-internal:///67033:19:3)
    at Provider (webpack-internal:///57456:21:20)
    at QueryClientProvider (webpack-internal:///34513:45:21)
    at exports.ThemeProvider (webpack-internal:///78384:3:24863)
    at ThemeProvider (webpack-internal:///./src/ThemeProvider/ThemeProvider.js:25:24)
    at Theme (webpack-internal:///57954:21:18)
    at ThemeToggleProvider (webpack-internal:///33430:22:32)
    at Providers (webpack-internal:///29837:49:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-dom.development.js?61bb:20085
update.payload @ react-dom.development.js?61bb:20133
getStateFromUpdate @ react-dom.development.js?61bb:12102
processUpdateQueue @ react-dom.development.js?61bb:12250
updateClassInstance @ react-dom.development.js?61bb:13013
updateClassComponent @ react-dom.development.js?61bb:17432
beginWork @ react-dom.development.js?61bb:19073
beginWork$1 @ react-dom.development.js?61bb:23940
performUnitOfWork @ react-dom.development.js?61bb:22776
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
eval @ react-dom.development.js?61bb:11327
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:11322
flushSyncCallbackQueue @ react-dom.development.js?61bb:11309
flushPassiveEffectsImpl @ react-dom.development.js?61bb:23620
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
flushPassiveEffects @ react-dom.development.js?61bb:23447
eval @ react-dom.development.js?61bb:23324
workLoop @ scheduler.development.js?3069:417
flushWork @ scheduler.development.js?3069:390
performWorkUntilDeadline @ scheduler.development.js?3069:157
react-dom.development.js?61bb:20085 The above error occurred in the <ErrorBoundary> component:

    at ErrorBoundary (webpack-internal:///66730:40:35)
    at CollectionTypeRecursivePath (webpack-internal:///22601:41:37)
    at Route (webpack-internal:///62898:470:29)
    at Switch (webpack-internal:///62898:676:29)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at Layout (webpack-internal:///./src/Layout/Layout.js:26:23)
    at App (webpack-internal:///85544:54:92)
    at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///85544:120:81)
    at Route (webpack-internal:///62898:470:29)
    at Switch (webpack-internal:///62898:676:29)
    at Suspense
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at div
    at I (webpack-internal:///78384:3:19689)
    at AppLayout (webpack-internal:///24448:30:22)
    at DndProvider (webpack-internal:///97668:41:23)
    at Admin (webpack-internal:///82186:73:3)
    at PluginsInitializer (webpack-internal:///10850:21:102)
    at RBACProvider (webpack-internal:///65772:22:25)
    at AuthenticatedApp (webpack-internal:///69754:55:107)
    at Route (webpack-internal:///62898:470:29)
    at PrivateRoute (webpack-internal:///93789:48:29)
    at Switch (webpack-internal:///62898:676:29)
    at TrackingProvider
    at Suspense
    at App (webpack-internal:///30439:83:100)
    at Router (webpack-internal:///62898:99:30)
    at BrowserRouter (webpack-internal:///6113:67:35)
    at NotificationsProvider (webpack-internal:///./lib/src/providers/NotificationsProvider/index.js:24:23)
    at Notifications (webpack-internal:///46176:24:26)
    at GuidedTourProvider (webpack-internal:///./lib/src/providers/GuidedTourProvider/index.js:19:23)
    at GuidedTour (webpack-internal:///89871:30:23)
    at OverlayBlockerProvider (webpack-internal:///73445:46:35)
    at AutoReloadOverlayBlockerProvider (webpack-internal:///68554:39:45)
    at LocalesProvider (webpack-internal:///32885:16:28)
    at IntlProvider (webpack-internal:///51518:83:47)
    at LanguageProvider (webpack-internal:///44796:27:29)
    at LibraryProvider (webpack-internal:///./lib/src/providers/LibraryProvider/index.js:19:23)
    at StrapiAppProvider (webpack-internal:///./lib/src/providers/StrapiAppProvider/index.js:19:23)
    at ConfigurationsProvider (webpack-internal:///67033:19:3)
    at Provider (webpack-internal:///57456:21:20)
    at QueryClientProvider (webpack-internal:///34513:45:21)
    at exports.ThemeProvider (webpack-internal:///78384:3:24863)
    at ThemeProvider (webpack-internal:///./src/ThemeProvider/ThemeProvider.js:25:24)
    at Theme (webpack-internal:///57954:21:18)
    at ThemeToggleProvider (webpack-internal:///33430:22:32)
    at Providers (webpack-internal:///29837:49:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

jibin2706 commented 2 years ago

To fix this bug this issue. Run this command it will fix the version issue @coderdiaz

yarn remove strapi-tiptap-editor
yarn add strapi-tiptap-editor

dasmikko / strapi-tiptap-editor

[Bug] Error: Adding different instances of a keyed #32