Best way to handle commonjs conditional re-exports?

[chopfitzroy]

I am trying to use '@tanstack/react-query' and am getting the following error:

Uncaught SyntaxError: The requested module '/@npm/use-sync-external-store/shim/index.js' does not provide an export named 'useSyncExternalStore' (at react-query:4:10)

Based on #922 it would appear this is related to how the package is bundled, is there a way I can force the use of the preact/compat version here?

I tried using alias in my wmr.config.mjs but I couldn't find any pattern that worked.

[rschristian]

Sure, easiest would be to use @rollup/replace-plugin. Just install it and modify your wmr.config.mjs to look a little like the following:

// wmr.config.mjs
import { defineConfig } from 'wmr';
import replace from '@rollup/replace-plugin';

// Full list of options: https://wmr.dev/docs/configuration
export default defineConfig({
	/* Your configuration here */
	alias: {
		react: 'preact/compat',
		'react-dom': 'preact/compat'
	},
        plugins: [
                replace({ 'use-sync-external-store/shim/index.js': 'preact/compat' }),
        ],
});

This (more or less) directly swaps string values. A bit less refined than an alias, but still very effective (and necessary in this case).

Hope it helps!

[chopfitzroy]

Thank you so much, worked as expected 🎉