[base-ui] "useId" import error after updating esbuild about material-ui HOT 12 OPEN

I think the goal is to make it impossible to statically analyze. I saw a screenshot where React used Math.random() to trick bundlers, and it seems like the only future-proof method. This should hopefully work forever, regardless of new tricks bundlers perform:

React[`useId${Math.random()}`.slice(0, 5)]

The other technique that might be future proof is:

const _React = {...React};
const useReactId = _React.useId;

from material-ui.

I'm getting the same issue but with useSyncExternalStore

from material-ui.

@patrykszwed Could you also provide a minimal repro for the repo where you finally use this built package ?

from material-ui.

@brijeshb42 sure thing. I've updated the one linked in the description. It is enough to:

1. cd final-app
2. Run npm i
3. Run npm run build

A warning about useId import should appear, and some additional ones about useInsertionEffect with the same message. Apparently useInsertionEffect causes a similar issue. Here are the logs:

Here's a link to the repo itself - mui-repro-lib. Let me know in case you need anything else and thanks for looking into this.

from material-ui.

Thanks. I will investigate.
Edit: @patrykszwed Can you update the demo app to be runnable in dev mode. Right now, it just renders Cannot GET / with a server error. Ideally, I should be able to see the Autocomplete component or some error in the browser console.

from material-ui.

@brijeshb42 sure, I've added and setup a dev script so you should be able to run npm run dev now. It will run the app with errors unless Autocomplete import and usage is removed/commented out in the index.js file. These changes are merged into the repo and the sandbox.

from material-ui.

Reproduction

I can reproduce on https://esbuild.github.io/try/#dAAwLjE5LjYALS1taW5pZnkAcmV0dXJuICdzZWYnLnRvU3RyaW5nKCk7

This is since esbuild v0.19.6 (Nov 19, 2023).

Context

So If I understand correctly:

• Webpack warns logic isn't smart enough: webpack/webpack#14814
• Webpack doesn't resolve 'a' + 'b'. webpack/webpack#14814 (comment) so we used it
• But esbuild <v0.19.6 does resolve resolve 'a' + 'b': #37182, so we used ''.toString();
• Now esbuild resolves ''.toString().
• Terser still doesn't support ''.toString() https://try.terser.org/

• Next.js uses SWC as a minifier, but it looks super dumb so we are good

Options

• Maybe atob('dXNlSWQ=') would do it, but can have limitations on the server: mui/mui-x#11046.
• This is resolved by Terser but not esbuild

const use = 'use';
return `${use}Id`;

• The simplest seems to be 'useId'.toString(10). Per #37183 (comment), we should fix useId and useSyncExternalStore.

cc @atomiks too as https://github.com/floating-ui/floating-ui/blob/495954da10d2abe8a5e6a0f0247582f071d6f031/packages/react/src/hooks/useId.ts#L30 is a dependency of @mui/base

https://npm.anvaka.com/#/view/2d/%2540mui%252Fbase

@brijeshb42 The @mui/utils package is mostly an npm dependency of Base UI, I fixed the labels (a bit MUI System too but it's rarer). I fixed this.

from material-ui.

cc @atomiks too as https://github.com/floating-ui/floating-ui/blob/495954da10d2abe8a5e6a0f0247582f071d6f031/packages/react/src/hooks/useId.ts#L30 is a dependency of @mui/base

useId is not part of @floating-ui/react-dom, only @floating-ui/react, so the dependency won't affect @mui/base.

So simply passing an argument like 'useId'.toString(0) is what works now? There's a chance more bundler minifier updates will break it in the future, so maybe an alternative method is worth looking into.

Here's how Ariakit does it:

import * as React from "react";
// See https://github.com/webpack/webpack/issues/14814
const _React = { ...React };
const useReactId = _React.useId;

from material-ui.

I've also verified that React['useId '.trim()] works but it'll be a cat and mouse game. We'll need to also get the similar issue fixed in emotion related to its usage of useInsertionEffect as that is also part of the error right now.

from material-ui.

@patrykszwed Just curious, why not keep @mui/material as external when building your own package ?

from material-ui.

@brijeshb42 our setup is pretty wild and we're using yarn in the app repo while using npm in the components package. When working locally, we're using links to link the local package version.

Juggling between different webpack and rollup configurations results, in most cases, in either:

1. Invalid hook call. error (multiple react versions detected). We solve this by specifying an alias for react in our webpack config, that is: alias: { react: require.resolve('react') }
2. Or when defining @mui/material as an external dependency - Module not found: Error: Can't resolve 'react/jsx-runtime' in '{MY_LOCAL_PATH}/node_modules/@mui/system/esm/cssVars'. This one can be solved by removing an alias for react, but once that's done we're going back to the first issue. We've been trying to fix that by using webpack fallback and/or alias options but without luck so far.

from material-ui.

Hey @brijeshb42, I just wanted to ask if there's a plan to fix that issue in the nearest future? I took a look into this PR in the radix-ui repo. It looks like the solution proposed by its author (calling .trim() before the .toString() call) works so it could potentially be reused here as well.

esbuild v0.19.6:
https://esbuild.github.io/try/#dAAwLjE5LjYALS1taW5pZnkAcmV0dXJuICdzZWYnLnRyaW0oKS50b1N0cmluZygpOw

esbuild v0.20.2:
https://esbuild.github.io/try/#dAAwLjIwLjIALS1taW5pZnkAcmV0dXJuICdzZWYnLnRyaW0oKS50b1N0cmluZygpOw

from material-ui.