Vite + react + useQuery = use-sync-external-store/shim problem

[willosof]

• Vite 2.9.7
• @apollo/client 3.6.2
• React 18.1.0

More a compatibility issue, rather than a bug. And, to help others in need.

apollo/client uses useSyncExternalStore from use-sync-external-store/shim/index.js. This is not needed in React 18, since it has useSyncExternalStore built in. But vite likes ESM exported modules, so it will fail due to the old exporting in use-sync-external-store that @apollo/client requires when using useQuery.

My workaround for this is to add a resolve alias to the vite defineConfig

	resolve: {
		alias: {
			'use-sync-external-store/shim/index.js': 'react',

Works, but it's something I've spent countless hours trying to figure out :)

[benjamn]

@willosof Please have a look at PR #9675, a fairly radical solution to this problem that I believe will work, because it's more ESM-friendly and avoids the use-sync-external-store/shim package entirely.

[benjamn]

Related discussion: #9668 (comment)

[benjamn]

@willosof Echoing #9668 (comment), if you update to version 3.7.0-alpha.3 by running

npm i @apollo/client@beta

you'll get a version of the library that includes PR #9675, which I believe makes this issue disappear!

Please let us know how that goes, and (with any luck) we can get these changes released in v3.6.4 (not really v3.7… that's just an easier way to test).