core: next-mf 8.0.1-4: Prod build errors

Hi there.

I have issues running federated Next.js SSR with next-mf 8.0.1-4. I’ve been following closely here the last few weeks, and have had a lot of issues solved - so awesome work so far!

My two apps are running perfectly in dev mode (next dev). And they build without errors (next build). But when I deploy them to cloud or run locally with next start I get the following 3 errors:

TypeError: Cannot read properties of null (reading 'useLayoutEffect')

Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message 

Uncaught TypeError: Cannot read properties of null (reading 'useLayoutEffect')

Full trace from console

2834.92a036006b2e6ee0.js:195 TypeError: Cannot read properties of null (reading 'useLayoutEffect')
    at push.2408.exports.useLayoutEffect (294.87322a9f6ffbc9dd.js:31:139)
    at Root (main-c09f3309c76517e9.js:645:20)
    at Xh (2834.92a036006b2e6ee0.js:173:137)
    at Wk (2834.92a036006b2e6ee0.js:296:337)
    at Vk (2834.92a036006b2e6ee0.js:286:389)
    at Uk (2834.92a036006b2e6ee0.js:286:320)
    at Jk (2834.92a036006b2e6ee0.js:286:180)
    at Ok (2834.92a036006b2e6ee0.js:277:88)
    at Hk (2834.92a036006b2e6ee0.js:274:429)
    at J (2834.92a036006b2e6ee0.js:383:203)
Mi @ 2834.92a036006b2e6ee0.js:195
Oi.c.callback @ 2834.92a036006b2e6ee0.js:195
ih @ 2834.92a036006b2e6ee0.js:150
lk @ 2834.92a036006b2e6ee0.js:268
jk @ 2834.92a036006b2e6ee0.js:266
ik @ 2834.92a036006b2e6ee0.js:265
Xk @ 2834.92a036006b2e6ee0.js:289
Qk @ 2834.92a036006b2e6ee0.js:287
Hk @ 2834.92a036006b2e6ee0.js:275
J @ 2834.92a036006b2e6ee0.js:383
R @ 2834.92a036006b2e6ee0.js:384
2834.92a036006b2e6ee0.js:299 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Wk (2834.92a036006b2e6ee0.js:299:39)
    at Vk (2834.92a036006b2e6ee0.js:286:389)
    at Uk (2834.92a036006b2e6ee0.js:286:320)
    at Jk (2834.92a036006b2e6ee0.js:286:180)
    at Ok (2834.92a036006b2e6ee0.js:277:88)
    at Hk (2834.92a036006b2e6ee0.js:274:429)
    at J (2834.92a036006b2e6ee0.js:383:203)
    at MessagePort.R (2834.92a036006b2e6ee0.js:384:128)
Wk @ 2834.92a036006b2e6ee0.js:299
Vk @ 2834.92a036006b2e6ee0.js:286
Uk @ 2834.92a036006b2e6ee0.js:286
Jk @ 2834.92a036006b2e6ee0.js:286
Ok @ 2834.92a036006b2e6ee0.js:277
Hk @ 2834.92a036006b2e6ee0.js:274
J @ 2834.92a036006b2e6ee0.js:383
R @ 2834.92a036006b2e6ee0.js:384
2834.92a036006b2e6ee0.js:289 Uncaught TypeError: Cannot read properties of null (reading 'useLayoutEffect')
    at push.2408.exports.useLayoutEffect (294.87322a9f6ffbc9dd.js:31:139)
    at Root (main-c09f3309c76517e9.js:645:20)
    at Xh (2834.92a036006b2e6ee0.js:173:137)
    at Wk (2834.92a036006b2e6ee0.js:296:337)
    at Vk (2834.92a036006b2e6ee0.js:286:389)
    at Uk (2834.92a036006b2e6ee0.js:286:320)
    at Jk (2834.92a036006b2e6ee0.js:286:180)
    at Ok (2834.92a036006b2e6ee0.js:277:88)
    at Hk (2834.92a036006b2e6ee0.js:274:429)
    at J (2834.92a036006b2e6ee0.js:383:203)
push.2408.exports.useLayoutEffect @ 294.87322a9f6ffbc9dd.js:31
Root @ main-c09f3309c76517e9.js:645
Xh @ 2834.92a036006b2e6ee0.js:173
Wk @ 2834.92a036006b2e6ee0.js:296
Vk @ 2834.92a036006b2e6ee0.js:286
Uk @ 2834.92a036006b2e6ee0.js:286
Jk @ 2834.92a036006b2e6ee0.js:286
Ok @ 2834.92a036006b2e6ee0.js:277
Hk @ 2834.92a036006b2e6ee0.js:274
J @ 2834.92a036006b2e6ee0.js:383
R @ 2834.92a036006b2e6ee0.js:384

If I do a uncompressed prod build, I can the that the error comes from this:

function Root(param) {
    let { callbacks, children } = param;
    // We use `useLayoutEffect` to guarantee the callbacks are executed
    // as soon as React flushes the update
    _react.default.useLayoutEffect(()=>callbacks.forEach((callback)=>callback()), [ // <--- HERE
        callbacks
    ]);
    // We should ask to measure the Web Vitals after rendering completes so we
    // don't cause any hydration delay:
    _react.default.useEffect(()=>{
        (0, _performancerelayer.default)(onPerfEntry);
    }, []);
    if (false) {}
    return children;
}

Which to me looks like something inside next.

Anyone got any tips on how to find out whats going on or how to fix?

About this issue

Original URL
State: closed
Created 9 months ago
Reactions: 4
Comments: 15 (9 by maintainers)

Most upvoted comments

Perfect. A repo helps. I’ll text it against prod build and see what I find. It looks like maybe next is doing some optimization (maybe) but I’ll confirm

ScriptedAlchemy on Oct 13, 2023

🎉 This issue has been resolved in version 8.1.0-canary.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions[bot] on Oct 23, 2023

Okay so I’ve looked into this. Perhaps you could help. If not no problem, it’ll just take some time to figure out a solution. In next plugin there’s an inverted container runtime module. I create a proxy that patches share scope. The problem seems to be related to parts of next or react only in prod are loading from remotes shared. Not the hosts. The proxy works in dev but seems the ordering is different in prod. I should not allow other who are not the host to overwrite react or next keys. I have a mid term plan to improve MF apis so I can control share negotiation directly. But that’s not ready yet so currently looking at a viable solution to workaround it.

ScriptedAlchemy on Oct 14, 2023

I’m having the same issue, it seems like the host can’t find react internals (useContext, useState, etc.) when loading a remote module, is there a quick fix for this?

Cannot read properties of null  (reading 'useContext')

wassgha on Oct 19, 2023

Do you have a example repo i can look at

ScriptedAlchemy on Nov 8, 2023

@ScriptedAlchemy

The issue is resolved for the next/react packages; however, I’m unable to share other packages on production that I could previously share.

For example;

		shared: {
			'@tanstack/react-query': {
				requiredVersion: false,
				singleton: true,
			},
		},

akifunal on Oct 25, 2023