Bug when importing zustand/middleware persist

[pedroafsouza]

Bug Description

I am using react expo and trying to use the vanila example with zustand/middleware.

interface SettingsState {
  settings: ISettings;
  updateSettings: (settings: Partial<ISettings>) => void;
}

const settingsKey = 'settings';

export const useSettings = create<SettingsState>()(
  persist(
    (set, get) => ({
      settings: defaultSettings,
      updateSettings: (updatedSettings: Partial<ISettings>) => {
        const newSettings = {
          ...get().settings,
          ...updatedSettings,
        } as ISettings;
        set({ settings: newSettings });
      },
    }),
    {
      name: settingsKey,
      storage: createJSONStorage(() => AsynStorage), // Using WmaStorage as the storage engine
    },
  ),
);

However, when I try to use this. I get the following error in browser or expo.

Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at node_modules%5Cexpo-router%5Centry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:65074:67)

My current package.json:

"@miblanchard/react-native-slider": "2.6.0",
  "@react-native-community/cli": "14.1.1",
  "@react-native-community/netinfo": "11.3.1",
  "@react-native-picker/picker": "2.7.5",
  "@react-navigation/native": "6.1.18",
  "@tanstack/react-query": "5.59.0",
  "expo": "51.0.35",
  "expo-camera": "15.0.16",
  "expo-constants": "16.0.2",
  "expo-font": "12.0.10",
  "expo-linear-gradient": "13.0.2",
  "expo-linking": "6.3.1",
  "expo-navigation-bar": "3.0.7",
  "expo-router": "3.5.23",
  "expo-screen-orientation": "7.0.5",
  "expo-splash-screen": "0.27.6",
  "expo-status-bar": "1.12.1",
  "expo-system-ui": "3.0.7",
  "expo-web-browser": "13.0.3",
  "fast-xml-parser": "4.5.0",
  "i18n-js": "4.4.3",
  "lodash": "4.17.21",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-native": "0.74.5",
  "react-native-gesture-handler": "2.16.1",
  "react-native-mmkv": "2.12.2",
  "react-native-reanimated": "3.10.1",
  "react-native-safe-area-context": "4.10.5",
  "react-native-screens": "3.31.1",
  "react-native-snackbar": "2.8.0",
  "react-native-web": "0.19.12",
  "zustand": "5.0.0",
  "@react-native-async-storage/async-storage": "1.23.1"

Reproduction Link

na

[dbritto-dev]

@pedroafsouza -> #1967 (comment)

[pedroafsouza]

I tried all suggestions and it didn't work. Is there any old version that doesn't use import meta ?

[pedroafsouza]

I back ported the code for Zustand persist and published a package at:

https://www.npmjs.com/package/expo-zustand-persist