muuri-react icon indicating copy to clipboard operation
muuri-react copied to clipboard

Published 20 hours ago • verified publisher icon paol-imi

[Gatsby] Does not work with current version

Open screendriver opened this issue 4 years ago • 6 comments

The only version combination where it works is muuri in v0.8.0 and muuri-react in v3.0.0. I'm following this CodeSandbox example. With all newer versions of both I'm getting

construct.js:17 Uncaught Invariant: Invariant failed: Cannot find the __reactInternalInstance$
    at invariant (http://localhost:8000/0.js:659:11)
    at getFiber (http://localhost:8000/0.js:1142:3)
    at http://localhost:8000/0.js:1013:24
    at invokePassiveEffectCreate (http://localhost:8000/commons.js:85868:20)
    at HTMLUnknownElement.callCallback (http://localhost:8000/commons.js:66331:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8000/commons.js:66380:16)
    at invokeGuardedCallback (http://localhost:8000/commons.js:66442:31)
    at flushPassiveEffectsImpl (http://localhost:8000/commons.js:85955:9)
    at unstable_runWithPriority (http://localhost:8000/commons.js:110349:12)
    at runWithPriority$1 (http://localhost:8000/commons.js:73662:10)
    at flushPassiveEffects (http://localhost:8000/commons.js:85828:14)
    at http://localhost:8000/commons.js:85705:11
    at workLoop (http://localhost:8000/commons.js:110293:34)
    at flushWork (http://localhost:8000/commons.js:110248:16)
    at MessagePort.performWorkUntilDeadline (http://localhost:8000/commons.js:109860:27)
muuri-react.esm.js:847 Uncaught TypeError: Cannot read property 'alternate' of undefined
    at getCurrentFiber (muuri-react.esm.js:847)
    at FiberController.getStateNodes (muuri-react.esm.js:713)
    at muuri-react.esm.js:2162
    at invokePassiveEffectCreate (react-dom.development.js:23488)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3995)
    at invokeGuardedCallback (react-dom.development.js:4057)
    at flushPassiveEffectsImpl (react-dom.development.js:23575)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11277)
    at flushPassiveEffects (react-dom.development.js:23448)
    at react-dom.development.js:23325
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
muuri-react.esm.js:26 Uncaught TypeError: Cannot read property '_component' of undefined
    at isDecorated (muuri-react.esm.js:26)
    at addDecoration (muuri-react.esm.js:40)
    at fillItem (muuri-react.esm.js:1324)
    at Array.<anonymous> (muuri-react.esm.js:1516)
    at ItemAddController.emit (muuri-react.esm.js:278)
    at muuri-react.esm.js:2202
    at invokePassiveEffectCreate (react-dom.development.js:23488)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3995)
    at invokeGuardedCallback (react-dom.development.js:4057)
    at flushPassiveEffectsImpl (react-dom.development.js:23575)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11277)
    at flushPassiveEffects (react-dom.development.js:23448)
    at react-dom.development.js:23325
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
index.js:2177 The above error occurred in the <GridComponent> component:

    at GridComponent (http://localhost:8000/0.js:2086:23)
    at MuuriComponent (http://localhost:8000/0.js:2965:23)
    at MuuriSection (http://localhost:8000/2.js:151:21)
    at AppContainer (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at HotLoaderLazyWrapper
    at Suspense
    at main
    at Layout (http://localhost:8000/commons.js:116538:24)
    at MyPage (http://localhost:8000/commons.js:160989:19)
    at AppContainer (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at HotExportedMyPage (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at I18nextProvider (http://localhost:8000/commons.js:99586:19)
    at PageRenderer (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at PageQueryStore (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at RouteHandler
    at div
    at FocusHandlerImpl (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at FocusHandler (http://localhost:8000/commons.js:34037:19)
    at RouterImpl (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at Location (http://localhost:8000/commons.js:33777:23)
    at Router
    at ScrollHandler (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at RouteUpdates (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at EnsureResources (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at LocationHandler (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at LocationProvider (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at Location (http://localhost:8000/commons.js:33777:23)
    at Root
    at BreadcrumbProvider (http://localhost:8000/commons.js:44159:23)
    at OptionsProvider (http://localhost:8000/commons.js:44477:23)
    at AppProviders (http://localhost:8000/commons.js:43958:22)
    at StaticQueryStore (eval at ES6ProxyComponentFactory (http://localhost:8000/commons.js:96527:10), <anonymous>:14:7)
    at _default

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

screendriver avatar Nov 30 '20 19:11 screendriver

Update: does not even work with old versions (muuri-react v3.0.0 and muuri v0.8.0) when building a production build. Also downgrading React to v16.13.1 does not help.

react_devtools_backend.js:2430 TypeError: Cannot read property 'child' of null
    at z (index.js:519)
    at index.js:801
    at ro (react-dom.production.min.js:211)
    at vu (react-dom.production.min.js:257)
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at Ql (react-dom.production.min.js:122)
    at hu (react-dom.production.min.js:257)
    at Zo (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at t.unstable_runWithPriority (scheduler.production.min.js:19)

screendriver avatar Dec 01 '20 01:12 screendriver

Another update: with this combination it works in both environments (development and production build):

  • muuri: v0.9.3
  • muuri-react: v3.1.6
  • react: v16.13.1

Problem starts to occur when using React v17.0.1

screendriver avatar Dec 01 '20 02:12 screendriver

Is there a fix coming for this? I can't downgrade :(

bigDado avatar Dec 03 '20 09:12 bigDado

I'm still receiving this problem using React 17.0.2 and muuri-react 3.1.6

asura6 avatar Apr 03 '21 16:04 asura6

Same issue:

  • muuri: v0.9.5
  • muuri-react: v3.1.6
  • react: v17.0.2

heathdutton avatar Oct 12 '21 21:10 heathdutton

patched it successfully for react 17. see https://github.com/Paol-imi/muuri-react/issues/49#issuecomment-1056612319

joernroeder avatar Mar 02 '22 08:03 joernroeder