"useId".toString() import error when using rollup to package components and then use webpack with react 17

[deepjoy]

Bug report

Current Behavior

When a component library using radix-ui/primitives is packaged with

• vite@^5.1.5
• esbuild@^0.19.3
• react@^17.0.2

primitives/packages/react/id/src/id.tsx

Line 5 in 605ccb4

const useReactId = (React as any)['useId'.toString()] || (() => undefined);

from the codebase is generated as

const V1 = React.useId || (() ...

when this library is then consumed by an App using

• webpack@5.89.0
• react@17.0.2

it trigger webpack/webpack#14814

Expected behavior

Using react@17 at both component and application level should not result in compilation errors when using webpack in the final step.

Reproducible example

N/A

Suggested solution

Since

primitives/packages/react/id/src/id.tsx

Line 5 in 605ccb4

const useReactId = (React as any)['useId'.toString()] || (() => undefined);

was introduced to avoid exactly this scenario I would suggest updating this to a more esoteric code snippet such as

const useReactId = (React as any)[' useId '.trim().toString()] || (() => undefined);

I have verified that this currently works with the esbuild and webpack versions listed above by using the rollup-replace plugin with this configuration

  [
    replace({
      values: {
          "'useId'.toString()": "' useId '.trim().toString()",
      },
      delimiters: [ "", ""],
   })
 ]

Additional context

N/A

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-id	1.0.1
React	n/a	17.0.2
Browser		any
Assistive tech		webpack @5
Node	n/a	18.19.0
npm/yarn	pnpm	8.13.1
Operating System		OSX

[deepjoy]

I found a similar bug report on mui