Unable to use in React Native due to import.meta not being supported

[malord]

React Native's Hermes JavaScript engine doesn't support import.meta and exits with an error at compile time, so testing for its existence in code doesn't work. I'm tempted to file a bug for this against Hermes but wondered whether any way around this already existed for Zustand?

[dai-shi]

If import.meta isn't supported, it means ESM isn't supported, I guess.
So, RN's Hermes should use CJS instead of ESM. (But, I don't think it's ideal.)

Our intentional workaround is to use "module" condition instead of "import" condition, but I'm afraid Hermes doesn't support those conditions in the first place. 🤔

@barelyhuman Do we have similar issues reported? We use the same config across zustand/jotai/valtio, and I suspect there are RN users who use Hermes...

[zgid123]

still raise error [Error: URL.pathname not implemented]

[zgid123]

this config can make zustand to work for expo when enablePackageExports is enabled

config.resolver.unstable_conditionNames = [
  'browser',
  'require',
  'react-native',
]

[owencraston]

I have been debugging this for two days. This finally fixed my issue when working in my turbo monorepo with expo. Thank you!

[ycmjason]

I've got it working with the following metro.config.js

...
config.resolver.unstable_enablePackageExports: true
config.resolver.unstable_conditionNames = [
    'require',
    'react-native',
    'default',
]
...

[gamentk]

Expo + Zustand 5.0.3. I add unstable_transformImportMeta in babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: [
            [
                'babel-preset-expo',
                {
                    jsxImportSource: 'nativewind',
                    unstable_transformImportMeta: true,
                },
            ],
            'nativewind/babel',
        ],
    };
};

[jvliwanag]

Coming here as a user of Jotai but having ran into the same issue.

First off, this issue is only apparent when using the metro config resolver.unstable_enablePackageExports with the default config from expo. Without unstable_enablePackageExports, metro skips reading exports and just uses the packages' main which points to commonjs. Moreover, metro/react-native doesn't look at the esm/import export by default, but the default expo config adds it here.

From here, metro runs by the resolver.unstable_enablePackageExports and resolver.unstable_conditionsByPlatform which ends up in runtime as Set('react-native', 'require', 'import', 'default') at least on expo projects. Take note that this is a set -- and the order on the config on metro doesn't matter. See closed metro issue.

A fix for expo users with unstable_enablePackageExports enabled is to add either require or react-native as the first entry per export. It cannot go after import, otherwise it will be import that's used.

// in package.json
   ".": {
      "require": {
        "types": "./index.d.ts",
        "default": "./index.js"
      },
      "import": {
        "types": "./esm/index.d.mts",
        "default": "./esm/index.mjs"
      },
      "default": {
        "types": "./index.d.ts",
        "default": "./index.js"
      }
    },
    "./*": {
      "require": {
        "types": "./*.d.ts",
        "default": "./*.js"
      },
      "import": {
        "types": "./esm/*.d.mts",
        "default": "./esm/*.mjs"
      },
      "default": {
        "types": "./*.d.ts",
        "default": "./*.js"
      }
    }

Patching my local version, i've confirmed this to work on local projects.

Note that while i've veered away from turning on unstable_enablePackageExports in the past, I believe the intention of the metro team is to enable this by default in the future. Also, my migration to storybook 8 on react native ends up turning this on.

[dai-shi]

I believe the intention of the metro team is to enable this by default in the future.

Do you think they are gonna do it without supporting import.meta?

[jvliwanag]

I'm afraid I don't know. Asked this on hermes discussion.

[jvliwanag]

ESM native support noted here.

[elyobo]

Enabled by default in Expo 53 now, at least.

[lukaszkurantdev]

I was able to make it work for RN 0.79.0 with New Arch enabled and with Zustand 5.0.3.

I've just removed elm exports from package json, without any changes in metro config (I had conflicts with different libraries).

diff --git a/node_modules/zustand/package.json b/node_modules/zustand/package.json
index f71d221..c7db890 100644
--- a/node_modules/zustand/package.json
+++ b/node_modules/zustand/package.json
@@ -8,17 +8,11 @@
   "types": "./index.d.ts",
   "typesVersions": {
     ">=4.5": {
-      "esm/*": [
-        "esm/*"
-      ],
       "*": [
         "*"
       ]
     },
     "*": {
-      "esm/*": [
-        "ts_version_4.5_and_above_is_required.d.ts"
-      ],
       "*": [
         "ts_version_4.5_and_above_is_required.d.ts"
       ]
@@ -27,20 +21,12 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": {
-        "types": "./esm/index.d.mts",
-        "default": "./esm/index.mjs"
-      },
       "default": {
         "types": "./index.d.ts",
         "default": "./index.js"
       }
     },
     "./*": {
-      "import": {
-        "types": "./esm/*.d.mts",
-        "default": "./esm/*.mjs"
-      },
       "default": {
         "types": "./*.d.ts",
         "default": "./*.js"

[jenskuhrjorgensen]

@lukaszkurantdev you are a life saver! This worked for me on react-native 0.79.2 with zustand 4.5.6. I removed all the "esm" lines and created a patch with npx patch-package zustand --exclude "nothing":

diff --git a/node_modules/zustand/package.json b/node_modules/zustand/package.json
index 889e52c..69ed803 100644
--- a/node_modules/zustand/package.json
+++ b/node_modules/zustand/package.json
@@ -7,9 +7,6 @@
   "types": "./index.d.ts",
   "typesVersions": {
     "<4.0": {
-      "esm/*": [
-        "ts3.4/*"
-      ],
       "*": [
         "ts3.4/*"
       ]
@@ -21,126 +18,54 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": {
-        "types": "./esm/index.d.mts",
-        "default": "./esm/index.mjs"
-      },
-      "module": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "default": {
         "types": "./index.d.ts",
         "default": "./index.js"
       }
     },
     "./vanilla": {
-      "import": {
-        "types": "./esm/vanilla.d.mts",
-        "default": "./esm/vanilla.mjs"
-      },
-      "module": {
-        "types": "./esm/vanilla.d.ts",
-        "default": "./esm/vanilla.js"
-      },
       "default": {
         "types": "./vanilla.d.ts",
         "default": "./vanilla.js"
       }
     },
     "./middleware": {
-      "import": {
-        "types": "./esm/middleware.d.mts",
-        "default": "./esm/middleware.mjs"
-      },
-      "module": {
-        "types": "./esm/middleware.d.ts",
-        "default": "./esm/middleware.js"
-      },
       "default": {
         "types": "./middleware.d.ts",
         "default": "./middleware.js"
       }
     },
     "./middleware/immer": {
-      "import": {
-        "types": "./esm/middleware/immer.d.mts",
-        "default": "./esm/middleware/immer.mjs"
-      },
-      "module": {
-        "types": "./esm/middleware/immer.d.ts",
-        "default": "./esm/middleware/immer.js"
-      },
       "default": {
         "types": "./middleware/immer.d.ts",
         "default": "./middleware/immer.js"
       }
     },
     "./shallow": {
-      "import": {
-        "types": "./esm/shallow.d.mts",
-        "default": "./esm/shallow.mjs"
-      },
-      "module": {
-        "types": "./esm/shallow.d.ts",
-        "default": "./esm/shallow.js"
-      },
       "default": {
         "types": "./shallow.d.ts",
         "default": "./shallow.js"
       }
     },
     "./vanilla/shallow": {
-      "import": {
-        "types": "./esm/vanilla/shallow.d.mts",
-        "default": "./esm/vanilla/shallow.mjs"
-      },
-      "module": {
-        "types": "./esm/vanilla/shallow.d.ts",
-        "default": "./esm/vanilla/shallow.js"
-      },
       "default": {
         "types": "./vanilla/shallow.d.ts",
         "default": "./vanilla/shallow.js"
       }
     },
     "./react/shallow": {
-      "import": {
-        "types": "./esm/react/shallow.d.mts",
-        "default": "./esm/react/shallow.mjs"
-      },
-      "module": {
-        "types": "./esm/react/shallow.d.ts",
-        "default": "./esm/react/shallow.js"
-      },
       "default": {
         "types": "./react/shallow.d.ts",
         "default": "./react/shallow.js"
       }
     },
     "./traditional": {
-      "import": {
-        "types": "./esm/traditional.d.mts",
-        "default": "./esm/traditional.mjs"
-      },
-      "module": {
-        "types": "./esm/traditional.d.ts",
-        "default": "./esm/traditional.js"
-      },
       "default": {
         "types": "./traditional.d.ts",
         "default": "./traditional.js"
       }
     },
     "./context": {
-      "import": {
-        "types": "./esm/context.d.mts",
-        "default": "./esm/context.mjs"
-      },
-      "module": {
-        "types": "./esm/context.d.ts",
-        "default": "./esm/context.js"
-      },
       "default": {
         "types": "./context.d.ts",
         "default": "./context.js"

[comertcimen]

Setting unstable_transformImportMeta to true in babel config solves the problem. (tested with expo sdk 53 beta)

Expo commit

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [["babel-preset-expo", { unstable_transformImportMeta: true }]],
  };
};

[rafang2206]

this work for me, thanks

[jgo80]

Perfect, thanks!

[LovesWorking]

Setting unstable_transformImportMeta to true in babel config solves the problem. (tested with expo sdk 53 beta)

Expo commit

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [["babel-preset-expo", { unstable_transformImportMeta: true }]],
  };
};

omg finally... Thank you!

[jomefavourite]

This worked, thanks

[dai-shi]

backlink pmndrs/jotai#3041

[MarceloBenjamin]

I've successefully make a workaround for this problem 😎. The previous answers only works in dev builds for me 😢.

if you run the command:

grep -r "import.meta" node_modules/zustand

will return this:

node_modules/zustand/esm/middleware.mjs:    extensionConnector = (enabled != null ? enabled : (import.meta.env ? import.meta.env.MODE : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
node_modules/zustand/esm/middleware.mjs:      if ((import.meta.env ? import.meta.env.MODE : undefined) !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {

I replaced those expressions with __DEV__, which works natively in React Native. Here’s the script:

/* eslint-disable @typescript-eslint/no-require-imports */
const fs = require('fs')
const path = require('path')

const filePath = path.resolve(
  __dirname,
  '../node_modules/zustand/esm/middleware.mjs'
)

if (!fs.existsSync(filePath)) {
  console.error('Zustand middleware.mjs not found!')
  process.exit(1)
}

let content = fs.readFileSync(filePath, 'utf8')

content = content.replace(
  /\(import\.meta\.env\s?\?\s?import\.meta\.env\.MODE\s?:\s?(void 0|undefined)\)\s?!==\s?"production"/g,
  '__DEV__'
)

fs.writeFileSync(filePath, content, 'utf8')

console.log('✅ Zustand patched successfully!')

In package.json:

"scripts": {
  "postinstall": "node scripts/patch-zustand.js"
}

Hope this helps someone else out there dealing with this!
Leave a like if it saved you some time ❤️

[IggsGrey]

I've successefully make a workaround for this problem 😎. The previous answers only works in dev builds for me 😢.

if you run the command:

grep -r "import.meta" node_modules/zustand

will return this:

node_modules/zustand/esm/middleware.mjs:    extensionConnector = (enabled != null ? enabled : (import.meta.env ? import.meta.env.MODE : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
node_modules/zustand/esm/middleware.mjs:      if ((import.meta.env ? import.meta.env.MODE : undefined) !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {

I replaced those expressions with __DEV__, which works natively in React Native. Here’s the script:

/* eslint-disable @typescript-eslint/no-require-imports */
const fs = require('fs')
const path = require('path')

const filePath = path.resolve(
  __dirname,
  '../node_modules/zustand/esm/middleware.mjs'
)

if (!fs.existsSync(filePath)) {
  console.error('Zustand middleware.mjs not found!')
  process.exit(1)
}

let content = fs.readFileSync(filePath, 'utf8')

content = content.replace(
  /\(import\.meta\.env\s?\?\s?import\.meta\.env\.MODE\s?:\s?(void 0|undefined)\)\s?!==\s?"production"/g,
  '__DEV__'
)

fs.writeFileSync(filePath, content, 'utf8')

console.log('✅ Zustand patched successfully!')

In package.json:

"scripts": {
  "postinstall": "node scripts/patch-zustand.js"
}

Hope this helps someone else out there dealing with this! Leave a like if it saved you some time ❤️

So essentially you're editing code in node_modules? That sounds like a very temporary solution.

[MarceloBenjamin]

Yes, temporary. It is just to unblock those who need to publish a new version of their apps as soon as possible

[gR-xbY]

thanks, it worked for me

[sgup]

Seeing this issue pop up after I upgraded to Expo 53

[teddybee]

comertcimen's solution is fixed this with 53.

[dai-shi]

Has anyone tried https://github.com/pmndrs/zustand/releases/tag/v5.0.4 ?

[mazenkhalil]

@dai-shi The issue persists with expo 53 and zustand v5.0.5. Adding unstable_transformImportMeta: true to babel.config.js solves it.

[dai-shi]

Yeah, I hope @sukminkang12 could look into it.

If #3087 doesn't solve, I guess there's something we don't understand yet.

[sukminkang12]

@dai-shi @mazenkhalil

For React Native CLI, there are no issues with Zustand version 5.0.4. In fact, users including myself have confirmed that the issues that occurred in version 5.0.3 have been resolved.

However, Expo is a different case. From my standpoint, I can't tell how Expo is configuring the bundler.

[sukminkang12]

Additionally, I think the fact that most users here have different configurations in their babel.config.js files is another factor that makes this issue more confusing.

[dai-shi]

Ah, I see Expo might be different.
#1967 (reply in thread) reported it worked with Expo.
So, I think we need someone who is familiar with Expo to look into it.
Any volunteers?

[aramis-it]

Got this error after upgrade expo 53. Any solution?

[mbernabo]

Try @comertcimen solution above.

[mattijsf]

Unfortunately unstable_transformImportMeta only works for expo projects?

For pure react-native projects we have to patch the files?

[sukminkang12]

Just try #1967 (comment)

[halbgott29a]

y babel.config.js configuration, this is how it was solved in my case, I hope it works for them.
module.exports = function(api) {
api.cache(true);
return {
presets: [
['babel-preset-expo', {
unstable_transformImportMeta: true
}]
],
plugins: [],
};
};

[lnmunhoz]

Adding this makes my Expo App on first load due to Navigation container not being loaded for some reason... only when adding unstable_transformImportMeta: true is happens.

[adelpro]

This solved my issue: Uncaught SyntaxError: import.meta may only appear in a module

• Adding this to metro.config

config.resolver.unstable_conditionNames = [
    'require',
    'react-native',
    'default',
]

I'm on Expo SDK 53, React 19, React-Native 0.79 and Jotai 2.12

[Rishab2391]

Any solution for react native
tried every solution still unresolved

[gorbypark]

This works great, however i'm a bit iffy about using it though, this is globally changing the conditional import order I believe..will there be any knock on effects? It would be nice if this could be applied to specific packages only, but it's unclear if that's even possible (from what I can tell so far, it is not possible).

[iameli]

Here's my solution, overriding the resolution to CommonJS resolution in metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");

let config = getDefaultConfig(__dirname, {
  // [Web-only]: Enables CSS support in Metro.
  isCSSEnabled: true,
});

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName.includes("zustand")) {
    const result = require.resolve(moduleName); // gets CommonJS version
    return context.resolveRequest(context, result, platform);
  }
  // otherwise chain to the standard Metro resolver.
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

[rinaldycodes]

its still doesnt solve my error, please give me more reference :(

[dai-shi]

Not a reference for a definitive solution, but there are discussions in pmndrs/jotai#3041.