'import.meta' is currently unsupported #911
Replies: 9 comments 9 replies
-
|
I wonder if metro has per-dependency config. |
Beta Was this translation helpful? Give feedback.
-
|
remove 'browser', 'require', 'react-native', from your metro.config and leave it like config.resolver.unstable_conditionNames = []; |
Beta Was this translation helpful? Give feedback.
-
|
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; |
Beta Was this translation helpful? Give feedback.
-
|
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/zustandwill 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 /* 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! |
Beta Was this translation helpful? Give feedback.
-
|
Can anyone try #1085? |
Beta Was this translation helpful? Give feedback.
-
|
I solved this issue at Expo and succeeded in getting valtio 2.1.4 to work. The key was to search for import.meta inside the And i used npm i [email protected]
npm i patch-packageAdd the following to your package.json "scripts": {
"postinstall": "patch-package"
}Files of `/patches/valtio+2.1.4.patch`Enter the file below with the name diff --git a/node_modules/valtio/esm/react.mjs b/node_modules/valtio/esm/react.mjs
index 98a0ef0..2584168 100644
--- a/node_modules/valtio/esm/react.mjs
+++ b/node_modules/valtio/esm/react.mjs
@@ -1,6 +1,6 @@
-import { useMemo, useRef, useSyncExternalStore, useCallback, useLayoutEffect, useEffect, useDebugValue } from 'react';
-import { isChanged, createProxy, affectedToPathList } from 'proxy-compare';
-import { subscribe, snapshot } from 'valtio/vanilla';
+import { affectedToPathList, createProxy, isChanged } from 'proxy-compare';
+import { useCallback, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { snapshot, subscribe } from 'valtio/vanilla';
const useAffectedDebugValue = (state, affected) => {
const pathList = useRef(void 0);
@@ -49,7 +49,7 @@ function useSnapshot(proxyObject, options) {
useLayoutEffect(() => {
lastSnapshot.current = currSnapshot;
});
- if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production") {
+ if (__DEV__) {
condUseAffectedDebugValue(currSnapshot, affected);
}
const proxyCache = useMemo(() => /* @__PURE__ */ new WeakMap(), []);
diff --git a/node_modules/valtio/esm/vanilla.mjs b/node_modules/valtio/esm/vanilla.mjs
index 5908ffa..770c128 100644
--- a/node_modules/valtio/esm/vanilla.mjs
+++ b/node_modules/valtio/esm/vanilla.mjs
@@ -1,4 +1,4 @@
-import { markToTrack, getUntracked } from 'proxy-compare';
+import { getUntracked, markToTrack } from 'proxy-compare';
const isObject = (x) => typeof x === "object" && x !== null;
const canProxyDefault = (x) => isObject(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer) && !(x instanceof Promise);
@@ -113,7 +113,7 @@ function proxy(baseObject = {}) {
const addPropListener = (prop, propValue) => {
const propProxyState = !refSet.has(propValue) && proxyStateMap.get(propValue);
if (propProxyState) {
- if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && propProxyStates.has(prop)) {
+ if (__DEV__ && propProxyStates.has(prop)) {
throw new Error("prop listener already exists");
}
if (listeners.size) {
@@ -136,7 +136,7 @@ function proxy(baseObject = {}) {
listeners.add(listener);
if (listeners.size === 1) {
propProxyStates.forEach(([propProxyState, prevRemove], prop) => {
- if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && prevRemove) {
+ if (__DEV__ !== "production" && prevRemove) {
throw new Error("remove already exists");
}
const remove = propProxyState[2](createPropListener(prop));
@@ -185,7 +185,7 @@ function getVersion(proxyObject) {
}
function subscribe(proxyObject, callback, notifyInSync) {
const proxyState = proxyStateMap.get(proxyObject);
- if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && !proxyState) {
+ if (__DEV__ && !proxyState) {
console.warn("Please use proxy object");
}
let promise;
@@ -216,7 +216,7 @@ function subscribe(proxyObject, callback, notifyInSync) {
}
function snapshot(proxyObject) {
const proxyState = proxyStateMap.get(proxyObject);
- if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && !proxyState) {
+ if (__DEV__ && !proxyState) {
console.warn("Please use proxy object");
}
const [target, ensureVersion] = proxyState;
diff --git a/node_modules/valtio/esm/vanilla/utils.mjs b/node_modules/valtio/esm/vanilla/utils.mjs
index ee732e4..18b44f7 100644
--- a/node_modules/valtio/esm/vanilla/utils.mjs
+++ b/node_modules/valtio/esm/vanilla/utils.mjs
@@ -1,4 +1,4 @@
-import { subscribe, snapshot, unstable_getInternalStates, proxy } from 'valtio/vanilla';
+import { proxy, snapshot, subscribe, unstable_getInternalStates } from 'valtio/vanilla';
function subscribeKey(proxyObject, key, callback, notifyInSync) {
let prevValue = proxyObject[key];
@@ -76,11 +76,11 @@ function devtools(proxyObject, options) {
const { enabled, name = "", ...rest } = options || {};
let extension;
try {
- extension = (enabled != null ? enabled : (import.meta.env ? import.meta.env.MODE : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
+ extension = (enabled != null ? enabled : __DEV__) && window.__REDUX_DEVTOOLS_EXTENSION__;
} catch (e) {
}
if (!extension) {
- if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && enabled) {
+ if (__DEV__ && enabled) {
console.warn("[Warning] Please install/enable Redux devtools extension");
}
return;Then enter the command below. npx patch-package valtioDone! |
Beta Was this translation helpful? Give feedback.
-
|
Let me know if #1085 fixes it. |
Beta Was this translation helpful? Give feedback.
-
|
Hey guys same issue, after installing I'm getting I've tried in metro.config.js But issue still persist, also tried with in babel.config.js with this config: none actually worked, any ideas/polyfills suggestions what can be done to tackle the issue 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
In case anyone else has this issue and it's because you upgraded to expo v53, I maybe have a solution. For me the issue was that I updated react native and expo from v52 to v53 but didn't update Zustand. So if you happen to forget to update zustand or any of your other packages, give it a try. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Bug Report
Description
When building my React Native app which uses
valtio, I get the following error:'import.meta' is currently unsupportedand other related errors.Environment
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:
This is my
metro.config.js:Beta Was this translation helpful? Give feedback.
All reactions