Preact + @mui + @emotion - app crashes when open select

[nihil-pro]

Everithing works fine until open the Select component, but not all selects
here function C(n, t) { return !n || n.length !== t.length || t.some((function(t, r) { return t !== n[r] } )) }

TypeError: Cannot read properties of undefined (reading 'length') at C (preact_compat_dist_compat_module_js.1.1.42.js:2:19192) at _ (preact_compat_dist_compat_module_js.1.1.42.js:2:16905) at b.Insertion [as constructor] (emotion_styled_dist_emotion-styled_browser_esm_js.1.1.2.js:2:8063) at b.q [as render] (preact_compat_dist_compat_module_js.1.1.2.js:2:24740) at O (preact_compat_dist_compat_module_js.1.1.2.js:2:22040) at S (preact_compat_dist_compat_module_js.1.1.2.js:2:17315) at O (preact_compat_dist_compat_module_js.1.1.2.js:2:22258) at S (preact_compat_dist_compat_module_js.1.1.2.js:2:17315) at O (preact_compat_dist_compat_module_js.1.1.2.js:2:22258) at S (preact_compat_dist_compat_module_js.1.1.2.js:2:17315)

[JoviDeCroock]

This seems to come from

/**
 * @param {unknown[]} oldArgs
 * @param {unknown[]} newArgs
 * @returns {boolean}
 */
function argsChanged(oldArgs, newArgs) {
	return (
		!oldArgs ||
		oldArgs.length !== newArgs.length ||
		newArgs.some((arg, index) => arg !== oldArgs[index])
	);
}

is it possible that the usage of hooks is so that the second argument is missing in their select?

Changing that to

/**
 * @param {unknown[]} oldArgs
 * @param {unknown[]} newArgs
 * @returns {boolean}
 */
function argsChanged(oldArgs, newArgs) {
	return (
		!oldArgs ||
		!newArgs ||
		oldArgs.length !== newArgs.length ||
		newArgs.some((arg, index) => arg !== oldArgs[index])
	

should prevent this crash

[nihil-pro]

There are no hooks in my code, i'm using modx and modx-react-lite. Maybe observer use them

[JoviDeCroock]

MUI might use it under the hood as well

[nihil-pro]

Yea. This solved problem, but not at all. With !newArgs checking it doesn't crash, but it seems like styles are inserted into head after rendering, because the opened select dropdown in rendered in the top|left of the page, not near the select itself

[JoviDeCroock]

I mean 😅 not much I can do about that, this just solves the effect issue which now behaves the same as React where it will just run every time when it's not present...

[nihil-pro]

Well. Want to switch to preact, but we use microfrontends, there are some microfrontends that use @mui. When mui is used, there are some problems((

[nihil-pro]

There was not problems with preact, only my mistake. I forgot to add preact to dependencies

[nihil-pro]

Some news...
Seems like the problem is more complex, but i can't understand why.
If we use preact with webpack module federation, some errors occurs.
If we share preact between mfe, the preact will be loaded twice, one time for shell app, and one for remote app. In this case, we have two instances of preact, and if we use some hooks in remote app we get errors like cannot read property __H of undefined. I am not sure, but seems like on render the pract compat from shell is used while hooks from preact/hooks remote app.

new webpack.container.ModuleFederationPlugin({
    name: 'shell',
    filename: `shell.${version}.js`,
    shared: { 
      preact: { 
        sharedKey: 'preact',
        requiredVersion: ''10.22.1,
        version: '10.22.1',
        singleton: true
      } 
    },
}),

Thats because we share preact, but there are some nested modules in preact, like hooks ore compat. We can fix it by adding slash in after preact name:

new webpack.container.ModuleFederationPlugin({
    name: 'shell',
    filename: `shell.${version}.js`,
    shared: { 
      'preact/': { 
        sharedKey: 'preact',
        requiredVersion: ''10.22.1,
        version: '10.22.1',
        singleton: true
      } 
    },
}),

In this case, both shell and remote applications import all things from preact shared from shell, but the remote app crashes with cannot read property {many names} of undefined.

[rschristian]

Do preact and preact/ refer to the same thing? I know with import maps they do not, requiring something like this:

<script type="importmap">
  {
    "imports": {
      "preact": "https://esm.sh/preact@10.23.1",
      "preact/": "https://esm.sh/preact@10.23.1/"
    }
  }
</script>

Is it possible you similarly need to define both? preact to dedupe core, and preact/ to dedupe addons (hooks, compat, etc)?

Never worked with module federation stuff, so this is just a vague guess in the off chance it's helpful.

[nihil-pro]

Yea. Seems like this fixed all problems. Thank you!

[rschristian]

God I love when my blind guesses work out!

Glad it could help!