'import.meta' is currently unsupported

[MattiaDellOca]

Bug Report

Description

When building my React Native app which uses valtio, I get the following error: 'import.meta' is currently unsupported and other related errors.

Environment

• OS: macOS 14.5
• Node version: 18.12.0
• React Native version: 0.74.1
• Xcode: 15.4

Screenshots/Logs

Additional Context

I tried fixing the issue following this previous discussion but none of the suggested solutions worked for me. Note that I can't use the following code as it messes up my other dependencies:

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

This is my metro.config.js:

const { getDefaultConfig } = require("@react-native/metro-config");

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push("cjs");
config.resolver.unstable_enablePackageExports = true;

module.exports = config;

[dai-shi]

I wonder if metro has per-dependency config.
If RN doesn't support import.meta soon, we should probably add react-native condition and make it point to CJS.

[MattiaDellOca]

Hello @dai-shi, thank you for your response.
Do you have a rough idea of when a fix will be available?
In this way I can know wether it make sense to wait or if I should simply move on and find another solution...

[dai-shi]

I would like to know if there's a workaround on the metro side.
We have the same config for zustand, jotai and valtio. So, I wonder how many RN users get affected with it. Has anyone filed an issue to the RN repo?

[neutronm]

remove 'browser', 'require', 'react-native', from your metro.config and leave it like config.resolver.unstable_conditionNames = [];
it worked for me.

[MattiaDellOca]

Unfortunately, this messes up my other dependencies 😔

[thejoaov]

Here's the patch for 5.0.1 version

diff --git a/esm/middleware.mjs b/esm/middleware.mjs
index ba769737aa83f64507beb3c8b7dc7803cfac854f..aaae565a16ff0c01c80cdcfb30546296b7c655ad 100644
--- a/esm/middleware.mjs
+++ b/esm/middleware.mjs
@@ -34,184 +34,7 @@ const extractConnectionInformation = (store, extensionConnector, options) => {
   trackedConnections.set(options.name, newConnection);
   return { type: "tracked", store, ...newConnection };
 };
-const devtoolsImpl = (fn, devtoolsOptions = {}) => (set, get, api) => {
-  const { enabled, anonymousActionType, store, ...options } = devtoolsOptions;
-  let extensionConnector;
-  try {
-    extensionConnector = (enabled != null ? enabled : (import.meta.env ? import.meta.env.MODE : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
-  } catch (e) {
-  }
-  if (!extensionConnector) {
-    return fn(set, get, api);
-  }
-  const { connection, ...connectionInformation } = extractConnectionInformation(store, extensionConnector, options);
-  let isRecording = true;
-  api.setState = (state, replace, nameOrAction) => {
-    const r = set(state, replace);
-    if (!isRecording) return r;
-    const action = nameOrAction === void 0 ? { type: anonymousActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction;
-    if (store === void 0) {
-      connection == null ? void 0 : connection.send(action, get());
-      return r;
-    }
-    connection == null ? void 0 : connection.send(
-      {
-        ...action,
-        type: `${store}/${action.type}`
-      },
-      {
-        ...getTrackedConnectionState(options.name),
-        [store]: api.getState()
-      }
-    );
-    return r;
-  };
-  const setStateFromDevtools = (...a) => {
-    const originalIsRecording = isRecording;
-    isRecording = false;
-    set(...a);
-    isRecording = originalIsRecording;
-  };
-  const initialState = fn(api.setState, get, api);
-  if (connectionInformation.type === "untracked") {
-    connection == null ? void 0 : connection.init(initialState);
-  } else {
-    connectionInformation.stores[connectionInformation.store] = api;
-    connection == null ? void 0 : connection.init(
-      Object.fromEntries(
-        Object.entries(connectionInformation.stores).map(([key, store2]) => [
-          key,
-          key === connectionInformation.store ? initialState : store2.getState()
-        ])
-      )
-    );
-  }
-  if (api.dispatchFromDevtools && typeof api.dispatch === "function") {
-    let didWarnAboutReservedActionType = false;
-    const originalDispatch = api.dispatch;
-    api.dispatch = (...a) => {
-      if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {
-        console.warn(
-          '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
-        );
-        didWarnAboutReservedActionType = true;
-      }
-      originalDispatch(...a);
-    };
-  }
-  connection.subscribe((message) => {
-    var _a;
-    switch (message.type) {
-      case "ACTION":
-        if (typeof message.payload !== "string") {
-          console.error(
-            "[zustand devtools middleware] Unsupported action format"
-          );
-          return;
-        }
-        return parseJsonThen(
-          message.payload,
-          (action) => {
-            if (action.type === "__setState") {
-              if (store === void 0) {
-                setStateFromDevtools(action.state);
-                return;
-              }
-              if (Object.keys(action.state).length !== 1) {
-                console.error(
-                  `
-                    [zustand devtools middleware] Unsupported __setState action format.
-                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
-                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
-                    `
-                );
-              }
-              const stateFromDevtools = action.state[store];
-              if (stateFromDevtools === void 0 || stateFromDevtools === null) {
-                return;
-              }
-              if (JSON.stringify(api.getState()) !== JSON.stringify(stateFromDevtools)) {
-                setStateFromDevtools(stateFromDevtools);
-              }
-              return;
-            }
-            if (!api.dispatchFromDevtools) return;
-            if (typeof api.dispatch !== "function") return;
-            api.dispatch(action);
-          }
-        );
-      case "DISPATCH":
-        switch (message.payload.type) {
-          case "RESET":
-            setStateFromDevtools(initialState);
-            if (store === void 0) {
-              return connection == null ? void 0 : connection.init(api.getState());
-            }
-            return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
-          case "COMMIT":
-            if (store === void 0) {
-              connection == null ? void 0 : connection.init(api.getState());
-              return;
-            }
-            return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
-          case "ROLLBACK":
-            return parseJsonThen(message.state, (state) => {
-              if (store === void 0) {
-                setStateFromDevtools(state);
-                connection == null ? void 0 : connection.init(api.getState());
-                return;
-              }
-              setStateFromDevtools(state[store]);
-              connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
-            });
-          case "JUMP_TO_STATE":
-          case "JUMP_TO_ACTION":
-            return parseJsonThen(message.state, (state) => {
-              if (store === void 0) {
-                setStateFromDevtools(state);
-                return;
-              }
-              if (JSON.stringify(api.getState()) !== JSON.stringify(state[store])) {
-                setStateFromDevtools(state[store]);
-              }
-            });
-          case "IMPORT_STATE": {
-            const { nextLiftedState } = message.payload;
-            const lastComputedState = (_a = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a.state;
-            if (!lastComputedState) return;
-            if (store === void 0) {
-              setStateFromDevtools(lastComputedState);
-            } else {
-              setStateFromDevtools(lastComputedState[store]);
-            }
-            connection == null ? void 0 : connection.send(
-              null,
-              // FIXME no-any
-              nextLiftedState
-            );
-            return;
-          }
-          case "PAUSE_RECORDING":
-            return isRecording = !isRecording;
-        }
-        return;
-    }
-  });
-  return initialState;
-};
-const devtools = devtoolsImpl;
-const parseJsonThen = (stringified, f) => {
-  let parsed;
-  try {
-    parsed = JSON.parse(stringified);
-  } catch (e) {
-    console.error(
-      "[zustand devtools middleware] Could not parse the received json",
-      e
-    );
-  }
-  if (parsed !== void 0) f(parsed);
-};
+const devtools = null;
 
 const subscribeWithSelectorImpl = (fn) => (set, get, api) => {
   const origSubscribe = api.subscribe;
diff --git a/middleware.js b/middleware.js
index 3829d879147c3a5fece0f99efae6943ff90b25e9..22c93df545be0909da9268318995cbb82eef2325 100644
--- a/middleware.js
+++ b/middleware.js
@@ -36,184 +36,7 @@ const extractConnectionInformation = (store, extensionConnector, options) => {
   trackedConnections.set(options.name, newConnection);
   return { type: "tracked", store, ...newConnection };
 };
-const devtoolsImpl = (fn, devtoolsOptions = {}) => (set, get, api) => {
-  const { enabled, anonymousActionType, store, ...options } = devtoolsOptions;
-  let extensionConnector;
-  try {
-    extensionConnector = (enabled != null ? enabled : process.env.NODE_ENV !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
-  } catch (e) {
-  }
-  if (!extensionConnector) {
-    return fn(set, get, api);
-  }
-  const { connection, ...connectionInformation } = extractConnectionInformation(store, extensionConnector, options);
-  let isRecording = true;
-  api.setState = (state, replace, nameOrAction) => {
-    const r = set(state, replace);
-    if (!isRecording) return r;
-    const action = nameOrAction === void 0 ? { type: anonymousActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction;
-    if (store === void 0) {
-      connection == null ? void 0 : connection.send(action, get());
-      return r;
-    }
-    connection == null ? void 0 : connection.send(
-      {
-        ...action,
-        type: `${store}/${action.type}`
-      },
-      {
-        ...getTrackedConnectionState(options.name),
-        [store]: api.getState()
-      }
-    );
-    return r;
-  };
-  const setStateFromDevtools = (...a) => {
-    const originalIsRecording = isRecording;
-    isRecording = false;
-    set(...a);
-    isRecording = originalIsRecording;
-  };
-  const initialState = fn(api.setState, get, api);
-  if (connectionInformation.type === "untracked") {
-    connection == null ? void 0 : connection.init(initialState);
-  } else {
-    connectionInformation.stores[connectionInformation.store] = api;
-    connection == null ? void 0 : connection.init(
-      Object.fromEntries(
-        Object.entries(connectionInformation.stores).map(([key, store2]) => [
-          key,
-          key === connectionInformation.store ? initialState : store2.getState()
-        ])
-      )
-    );
-  }
-  if (api.dispatchFromDevtools && typeof api.dispatch === "function") {
-    let didWarnAboutReservedActionType = false;
-    const originalDispatch = api.dispatch;
-    api.dispatch = (...a) => {
-      if (process.env.NODE_ENV !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {
-        console.warn(
-          '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
-        );
-        didWarnAboutReservedActionType = true;
-      }
-      originalDispatch(...a);
-    };
-  }
-  connection.subscribe((message) => {
-    var _a;
-    switch (message.type) {
-      case "ACTION":
-        if (typeof message.payload !== "string") {
-          console.error(
-            "[zustand devtools middleware] Unsupported action format"
-          );
-          return;
-        }
-        return parseJsonThen(
-          message.payload,
-          (action) => {
-            if (action.type === "__setState") {
-              if (store === void 0) {
-                setStateFromDevtools(action.state);
-                return;
-              }
-              if (Object.keys(action.state).length !== 1) {
-                console.error(
-                  `
-                    [zustand devtools middleware] Unsupported __setState action format.
-                    When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
-                    and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
-                    `
-                );
-              }
-              const stateFromDevtools = action.state[store];
-              if (stateFromDevtools === void 0 || stateFromDevtools === null) {
-                return;
-              }
-              if (JSON.stringify(api.getState()) !== JSON.stringify(stateFromDevtools)) {
-                setStateFromDevtools(stateFromDevtools);
-              }
-              return;
-            }
-            if (!api.dispatchFromDevtools) return;
-            if (typeof api.dispatch !== "function") return;
-            api.dispatch(action);
-          }
-        );
-      case "DISPATCH":
-        switch (message.payload.type) {
-          case "RESET":
-            setStateFromDevtools(initialState);
-            if (store === void 0) {
-              return connection == null ? void 0 : connection.init(api.getState());
-            }
-            return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
-          case "COMMIT":
-            if (store === void 0) {
-              connection == null ? void 0 : connection.init(api.getState());
-              return;
-            }
-            return connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
-          case "ROLLBACK":
-            return parseJsonThen(message.state, (state) => {
-              if (store === void 0) {
-                setStateFromDevtools(state);
-                connection == null ? void 0 : connection.init(api.getState());
-                return;
-              }
-              setStateFromDevtools(state[store]);
-              connection == null ? void 0 : connection.init(getTrackedConnectionState(options.name));
-            });
-          case "JUMP_TO_STATE":
-          case "JUMP_TO_ACTION":
-            return parseJsonThen(message.state, (state) => {
-              if (store === void 0) {
-                setStateFromDevtools(state);
-                return;
-              }
-              if (JSON.stringify(api.getState()) !== JSON.stringify(state[store])) {
-                setStateFromDevtools(state[store]);
-              }
-            });
-          case "IMPORT_STATE": {
-            const { nextLiftedState } = message.payload;
-            const lastComputedState = (_a = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a.state;
-            if (!lastComputedState) return;
-            if (store === void 0) {
-              setStateFromDevtools(lastComputedState);
-            } else {
-              setStateFromDevtools(lastComputedState[store]);
-            }
-            connection == null ? void 0 : connection.send(
-              null,
-              // FIXME no-any
-              nextLiftedState
-            );
-            return;
-          }
-          case "PAUSE_RECORDING":
-            return isRecording = !isRecording;
-        }
-        return;
-    }
-  });
-  return initialState;
-};
-const devtools = devtoolsImpl;
-const parseJsonThen = (stringified, f) => {
-  let parsed;
-  try {
-    parsed = JSON.parse(stringified);
-  } catch (e) {
-    console.error(
-      "[zustand devtools middleware] Could not parse the received json",
-      e
-    );
-  }
-  if (parsed !== void 0) f(parsed);
-};
+const devtools = null
 
 const subscribeWithSelectorImpl = (fn) => (set, get, api) => {
   const origSubscribe = api.subscribe;