export "useId" was not found in "react"

[jasonpaulmichel]

Please note: This is related to Webpack issue: webpack/webpack#14814

Some bundles (Webpack) may throw an error during compilation if code references a named import that a module does not export– even if the import is only used conditionally.

The error thrown by Webpack will look like:

export 'useId' (imported as '$fpI56$useId') was not found in 'react'

---

To work around this, the following change was made in 0.0.38:

- const useReactId = (React as any).useId as () => string;
+ // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+ const useReactId = (React as any)['useId'.toString()] as () => string;

Unfortunately it caused a regression and was reverted in 0.0.39. (Seemingly the new syntax confused Parcel.)

---

(Description modified by @bvaughn)

[bvaughn]

Just a warning? Should be safe to ignore. It's coming from useUniqueId:

react-resizable-panels/packages/react-resizable-panels/src/hooks/useUniqueId.ts

Lines 1 to 16 in 4151a63

	import { useId, useRef } from "react";
	let counter = 0;
	export default function useUniqueId(
	idFromParams: string | null = null
	): string {
	const idFromUseId = typeof useId === "function" ? useId() : null;
	const idRef = useRef<string | null>(idFromParams || idFromUseId || null);
	if (idRef.current === null) {
	idRef.current = "" + counter++;
	}
	return idRef.current;
	}

[jasonpaulmichel]

Damn, thank you for the fast response!

[bvaughn]

No prob! Sorry for the confusion.

[javiernievas]

I can confirm it raises an error on React v17. As it is trying to import useId and it does not exists.

ERROR in ./node_modules/react-resizable-panels/dist/react-resizable-panels.module.js 8:68-80
export 'useId' (imported as '$jhddX$useId') was not found in 'react'

[bvaughn]

Can you share a repro for this? Same as I asked for with #104.

[brightloudnoise]

Here is a repro using CRA and React v17, and a possible work-around for webpack.

Thanks!

[bvaughn]

@brightloudnoise Thanks for the work around pointer.

- const useReactId = (React as any).useId as () => string;
+ // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+ const useReactId = (React as any)['useId'.toString()] as () => string;

That's some funky syntax!

I'm not opposed to adding it here, provided it doesn't break anything though.

[bvaughn]

Thinking about this a little more and I worry this might cause tree shaking issues. Admittedly the "react" package is pretty small and probably tree shaking it (or not) would have minimal impact on the bundle size.

Ideally though, this would be something that Webpack supports: (webpack/webpack#14814)

Maybe it's okay to make this change on our side in the meanwhile.

[bvaughn]

Closed via ed96947

[bvaughn]

Fixed in 0.0.38

[bvaughn]

Looks like this change caused a regression (#118) so I'm going to revert it in 0.0.39 for now (4b73ea5).

[bvaughn]

Should be fixed in 0.0.39

[brightloudnoise]

Thanks for the fixes, and sorry the workaround caused other headaches.

[bvaughn]

No worries 😄