[base-ui] Fix downstream bundlers remove React 17 useId compatibility

[nickiaconis]

• I have followed (at least) the PR section of the contributing guide.

Summary

Fixes #37182. Based on this commit from floating-ui. I've confirmed that this will resolve the issue by manually tweaking the useId code in a local install of @mui/utils and running it through the same bundle process that's stripping the string concatenation.

Bundle output before tweak to confirm fix, using string concatenation in utils source

Note that +"" has been stripped from React3["useId"+""] on line 15. This is what's causing the downstream build issue.

// ../../common/temp/node_modules/.pnpm/@mui+utils@5.11.13_react@17.0.2/node_modules/@mui/utils/esm/useId.js
import * as React3 from "react";
var globalId = 0;
function useGlobalId(idOverride) {
  const [defaultId, setDefaultId] = React3.useState(idOverride);
  const id = idOverride || defaultId;
  React3.useEffect(() => {
    if (defaultId == null) {
      globalId += 1;
      setDefaultId(`mui-${globalId}`);
    }
  }, [defaultId]);
  return id;
}
var maybeReactUseId = React3["useId"];
function useId2(idOverride) {
  if (maybeReactUseId !== void 0) {
    const reactId = maybeReactUseId();
    return idOverride != null ? idOverride : reactId;
  }
  return useGlobalId(idOverride);
}

Bundle output after tweak to confirm fix, using .toString() in utils source

Note that the call to toString has been preserved on line 15.

// ../../common/temp/node_modules/.pnpm/@mui+utils@5.11.13_react@17.0.2/node_modules/@mui/utils/esm/useId.js
import * as React3 from "react";
var globalId = 0;
function useGlobalId(idOverride) {
  const [defaultId, setDefaultId] = React3.useState(idOverride);
  const id = idOverride || defaultId;
  React3.useEffect(() => {
    if (defaultId == null) {
      globalId += 1;
      setDefaultId(`mui-${globalId}`);
    }
  }, [defaultId]);
  return id;
}
var maybeReactUseId = React3["useId".toString()];
function useId(idOverride) {
  if (maybeReactUseId !== void 0) {
    const reactId = maybeReactUseId();
    return idOverride != null ? idOverride : reactId;
  }
  return useGlobalId(idOverride);
}

[mui-bot]

Netlify deploy preview

https://deploy-preview-37183--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against fb06a45

[mnajdova]

Hey, thanks for looking into this. Can you please share simple reproduction app so that we can validate the fix?

[nickiaconis]

Hi @mnajdova, would it be sufficient to only create a simple reproduction library, since we can look at the bundle output to see if it retains or loses v17 compatibility?

[nickiaconis]

If so, here it is: simple reproduction library

[mnajdova]

Thanks for the contribution!

[nickiaconis]

Thanks for the review @mnajdova! What's the next step in the process here?

[nickiaconis]

Wanted to check back in on this since it's a blocker for us. What needs to happen to get this merged?

[siriwatknp]

Wanted to check back in on this since it's a blocker for us. What needs to happen to get this merged?

It should be released today!

[oliviertassinari]

This PR is strange, we update useId but not useSyncExternalStore? We have two different solutions for the same problem:

material-ui/packages/mui-system/src/useMediaQuery/useMediaQuery.ts

Line 103 in 046aac6

const maybeReactUseSyncExternalStore: undefined | any = (React as any)['useSyncExternalStore' + ''];

I have left notes in #41190 to fix all instances.