[Gatsby] Does not work with current version

[screendriver]

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]

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]

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

[bigDado]

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

[asura6]

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

[heathdutton]

Same issue:

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

[joernroeder]

patched it successfully for react 17. see #49 (comment)