Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

export 'useId' was not found in 'react' #381

Closed
nwidger opened this issue Jul 31, 2024 · 4 comments · Fixed by #382
Closed

export 'useId' was not found in 'react' #381

nwidger opened this issue Jul 31, 2024 · 4 comments · Fixed by #382

Comments

@nwidger
Copy link
Contributor

nwidger commented Jul 31, 2024

Projects using this package and building with React <18 (the useId hook was introduced in React 18) and esbuild v0.19.6 or new (v0.23.0 is the latest version) see an error similar to the following:

export 'useId' (imported as 'Du') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

It seems like starting with esbuild v0.19.6, the line here is minified from:

const useId = (React as any)["useId".toString()] as () => string;

to just:

const useId = React.useId;

and therefore is no longer sufficiently obfuscated. I believe this issue similar in nature to #82. It appears other projects facing similar issues have further obfuscated the reference to React.useId to:

const useId = (React as any)[`useId${Math.random()}`.slice(0, 5)] as () => string;

You can see this in action using the esbuild playground link below. Using the Version pulldown in the top-right you can see how the old version was sufficiently obfuscated up until esbuild v0.19.6, where esbuild apparently became smart enough to minify it to just React.useId.

https://esbuild.github.io/try/#dAAwLjIzLjAALS1taW5pZnkALy8gY3VycmVudCB2ZXJzaW9uLCBtaW5pZmllcyB0byAiUmVhY3QudXNlSWQiClJlYWN0WyJ1c2VJZCIudG9TdHJpbmcoKV07CgovLyBwcm9wb3NlZCB2ZXJzaW9uLCBtaW5pZmllcyB0byAiUmVhY3RbYHVzZUlkJHtNYXRoLnJhbmRvbSgpfWAuc2xpY2UoMCw1KV0iClJlYWN0W2B1c2VJZCR7TWF0aC5yYW5kb20oKX1gLnNsaWNlKDAsIDUpXTs

Would you be opposed to further obfuscating this line using the Math.random() technique above? If so I would be happy to open a PR with the change. Thanks!

@bvaughn
Copy link
Owner

bvaughn commented Jul 31, 2024

Yeah, please do submit a PR and I'll be happy to review it!

nwidger pushed a commit to nwidger/react-resizable-panels that referenced this issue Jul 31, 2024
Use technique from this comment: mui/material-ui#41190 (comment) to further obfuscate reference to `React.useId` which causes issue when using `react-resizable-panels` with React <18 and `esbuild` > 0.19.5.

Fixes bvaughn#381
@nwidger
Copy link
Contributor Author

nwidger commented Jul 31, 2024

@bvaughn Awesome, thanks! I've just opened #382.

If you're happy with the changes and merge the PR, would it be possible to make a new release containing the fix?

@bvaughn
Copy link
Owner

bvaughn commented Aug 8, 2024

Fix published in v2.0.23

❤️ → ☕ givebrian.coffee

@nwidger
Copy link
Contributor Author

nwidger commented Aug 9, 2024

@bvaughn Thanks you so much, I really appreciate it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants