'import.meta' is currently unsupported #911
Unanswered
MattiaDellOca
asked this question in
Bug report
Replies: 9 comments 9 replies
-
|
I wonder if metro has per-dependency config. |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Hello @dai-shi, thank you for your response. |
Beta Was this translation helpful? Give feedback.
-
|
I would like to know if there's a workaround on the metro side. |
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.
1 reply
-
|
Unfortunately, this messes up my other dependencies 😔 |
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.
1 reply
-
|
Hello @thejoaov, thank you for your response. Additionally, I’m not sure which library you are referring to here:
For reference, the latest version of valtio at the time of writing is 2.1.2. |
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.
0 replies
-
|
Can anyone try #1085? |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Tried it with |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, there might be some cases we don't know... |
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.
1 reply
-
|
thank you |
Beta Was this translation helpful? Give feedback.
-
|
Let me know if #1085 fixes it. |
Beta Was this translation helpful? Give feedback.
1 reply
-
It did! |
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.
1 reply
-
|
Hmm, not sure why |
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.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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