Trying to understand why this doesn't treeshake.

[phryneas]

Hey there, I hope this is the right place to be asking this question :)

I'm currently working on some changes in Apollo Client, and it seems as a result one export is getting blown up, pulling in code that shouldn't be there - and looking at the result, I see code in there that is not exported and not referenced from anything that is exported.

So I thought I'd ask the exports: Why is useSuspenseQuery in this bundling result?

This is the bundling configuration

Comparing that to the upstream package, I get this diff:

0a1,4
> import { invariant as originalInvariant, InvariantError } from "ts-invariant";
> 
> var version = "0.0.0-pr-11617-20240226102810";
> 
6a11,132
> var global_default =
>   maybe(function () {
>     return globalThis;
>   }) ||
>   maybe(function () {
>     return window;
>   }) ||
>   maybe(function () {
>     return self;
>   }) ||
>   maybe(function () {
>     return global;
>   }) || // We don't expect the Function constructor ever to be invoked at runtime, as
>   // long as at least one of globalThis, window, self, or global is defined, so
>   // we are under no obligation to make it easy for static analysis tools to
>   // detect syntactic usage of the Function constructor. If you think you can
>   // improve your static analysis to detect this obfuscation, think again. This
>   // is an arms race you cannot win, at least not in JavaScript.
>   maybe(function () {
>     return maybe.constructor("return this")();
>   });
> 
> var prefixCounts = /* @__PURE__ */ new Map();
> function makeUniqueId(prefix) {
>   var count = prefixCounts.get(prefix) || 1;
>   prefixCounts.set(prefix, count + 1);
>   return ""
>     .concat(prefix, ":")
>     .concat(count, ":")
>     .concat(Math.random().toString(36).slice(2));
> }
> 
> function stringifyForDisplay(value, space) {
>   if (space === void 0) {
>     space = 0;
>   }
>   var undefId = makeUniqueId("stringifyForDisplay");
>   return JSON.stringify(
>     value,
>     function (key, value2) {
>       return value2 === void 0 ? undefId : value2;
>     },
>     space
>   )
>     .split(JSON.stringify(undefId))
>     .join("<undefined>");
> }
> 
> function wrap(fn) {
>   return function (message) {
>     var args = [];
>     for (var _i = 1; _i < arguments.length; _i++) {
>       args[_i - 1] = arguments[_i];
>     }
>     if (typeof message === "number") {
>       var arg0 = message;
>       message = getHandledErrorMsg(arg0);
>       if (!message) {
>         message = getFallbackErrorMsg(arg0, args);
>         args = [];
>       }
>     }
>     fn.apply(void 0, [message].concat(args));
>   };
> }
> var invariant = Object.assign(
>   function invariant2(condition, message) {
>     var args = [];
>     for (var _i = 2; _i < arguments.length; _i++) {
>       args[_i - 2] = arguments[_i];
>     }
>     if (!condition) {
>       originalInvariant(
>         condition,
>         getHandledErrorMsg(message, args) || getFallbackErrorMsg(message, args)
>       );
>     }
>   },
>   {
>     debug: wrap(originalInvariant.debug),
>     log: wrap(originalInvariant.log),
>     warn: wrap(originalInvariant.warn),
>     error: wrap(originalInvariant.error),
>   }
> );
> var ApolloErrorMessageHandler = Symbol.for(
>   "ApolloErrorMessageHandler_" + version
> );
> function stringify(arg) {
>   return typeof arg == "string"
>     ? arg
>     : stringifyForDisplay(arg, 2).slice(0, 1e3);
> }
> function getHandledErrorMsg(message, messageArgs) {
>   if (messageArgs === void 0) {
>     messageArgs = [];
>   }
>   if (!message) return;
>   return (
>     global_default[ApolloErrorMessageHandler] &&
>     global_default[ApolloErrorMessageHandler](
>       message,
>       messageArgs.map(stringify)
>     )
>   );
> }
> function getFallbackErrorMsg(message, messageArgs) {
>   if (messageArgs === void 0) {
>     messageArgs = [];
>   }
>   if (!message) return;
>   return "An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#".concat(
>     encodeURIComponent(
>       JSON.stringify({
>         version,
>         message,
>         args: messageArgs.map(stringify),
>       })
>     )
>   );
> }
> 
35a162,233
> import { WeakCache, StrongCache } from "@wry/caches";
> var scheduledCleanup = /* @__PURE__ */ new WeakSet();
> function schedule(cache) {
>   if (!scheduledCleanup.has(cache)) {
>     scheduledCleanup.add(cache);
>     setTimeout(function () {
>       cache.clean();
>       scheduledCleanup.delete(cache);
>     }, 100);
>   }
> }
> var AutoCleanedStrongCache = function (max, dispose) {
>   var cache = new StrongCache(max, dispose);
>   cache.set = function (key, value) {
>     schedule(this);
>     return StrongCache.prototype.set.call(this, key, value);
>   };
>   return cache;
> };
> 
> import { __assign } from "tslib";
> var cacheSizeSymbol = Symbol.for("apollo.cacheSize");
> var cacheSizes = __assign({}, global_default[cacheSizeSymbol]);
> 
> var canonicalStringify = Object.assign(
>   function canonicalStringify2(value) {
>     return JSON.stringify(value, stableObjectReplacer);
>   },
>   {
>     reset: function () {
>       sortingMap = new AutoCleanedStrongCache(
>         cacheSizes.canonicalStringify || 1e3
>         /* defaultCacheSizes.canonicalStringify */
>       );
>     },
>   }
> );
> if (false) {
>   registerGlobalCache("canonicalStringify", function () {
>     return sortingMap.size;
>   });
> }
> var sortingMap;
> canonicalStringify.reset();
> function stableObjectReplacer(key, value) {
>   if (value && typeof value === "object") {
>     var proto = Object.getPrototypeOf(value);
>     if (proto === Object.prototype || proto === null) {
>       var keys = Object.keys(value);
>       if (keys.every(everyKeyInOrder)) return value;
>       var unsortedKey = JSON.stringify(keys);
>       var sortedKeys = sortingMap.get(unsortedKey);
>       if (!sortedKeys) {
>         keys.sort();
>         var sortedKey = JSON.stringify(keys);
>         sortedKeys = sortingMap.get(sortedKey) || keys;
>         sortingMap.set(unsortedKey, sortedKeys);
>         sortingMap.set(sortedKey, sortedKeys);
>       }
>       var sortedObject_1 = Object.create(proto);
>       sortedKeys.forEach(function (key2) {
>         sortedObject_1[key2] = value[key2];
>       });
>       return sortedObject_1;
>     }
>   }
>   return value;
> }
> function everyKeyInOrder(key, i, keys) {
>   return i === 0 || keys[i - 1] <= key;
> }
> 
127a326,336
> var NetworkStatus;
> (function (NetworkStatus2) {
>   NetworkStatus2[(NetworkStatus2["loading"] = 1)] = "loading";
>   NetworkStatus2[(NetworkStatus2["setVariables"] = 2)] = "setVariables";
>   NetworkStatus2[(NetworkStatus2["fetchMore"] = 3)] = "fetchMore";
>   NetworkStatus2[(NetworkStatus2["refetch"] = 4)] = "refetch";
>   NetworkStatus2[(NetworkStatus2["poll"] = 6)] = "poll";
>   NetworkStatus2[(NetworkStatus2["ready"] = 7)] = "ready";
>   NetworkStatus2[(NetworkStatus2["error"] = 8)] = "error";
> })(NetworkStatus || (NetworkStatus = {}));
> 
131a341,367
> var contextKey = canUseSymbol
>   ? Symbol.for("__APOLLO_CONTEXT__")
>   : "__APOLLO_CONTEXT__";
> function getApolloContext() {
>   invariant("createContext" in React, 45);
>   var context = React.createContext[contextKey];
>   if (!context) {
>     Object.defineProperty(React.createContext, contextKey, {
>       value: (context = React.createContext({})),
>       enumerable: false,
>       writable: false,
>       configurable: true,
>     });
>     context.displayName = "ApolloContext";
>   }
>   return context;
> }
> 
> import * as React2 from "rehackt";
> function useApolloClient(override) {
>   var context = React2.useContext(getApolloContext());
>   var client = override || context.client;
>   invariant(!!client, 49);
>   return client;
> }
> 
> import * as React3 from "rehackt";
133c369
< var realHook = React[uSESKey];
---
> var realHook = React3[uSESKey];
144c380
<     var _a = React.useState({
---
>     var _a = React3.useState({
150c386
<       React.useLayoutEffect(
---
>       React3.useLayoutEffect(
162c398
<     React.useEffect(
---
>     React3.useEffect(
187c423,433
< import * as React2 from "rehackt";
---
> import * as React4 from "rehackt";
> import { equal } from "@wry/equality";
> function useDeepMemo(memoFn, deps) {
>   var ref = React4.useRef();
>   if (!ref.current || !equal(ref.current.deps, deps)) {
>     ref.current = { value: memoFn(), deps };
>   }
>   return ref.current.value;
> }
> 
> import * as React5 from "rehackt";
189c435
< var realHook2 = React2[useKey];
---
> var realHook2 = React5[useKey];
204,205c450,461
< import { __assign as __assign2, __spreadArray as __spreadArray2 } from "tslib";
< import * as React3 from "rehackt";
---
> var wrapperSymbol = Symbol.for("apollo.hook.wrappers");
> // @__NO_SIDE_EFFECTS__
> function makeHookWrappable(hookName, useHook, getClientFromOptions) {
>   return function () {
>     var args = arguments;
>     var queryManager = getClientFromOptions.apply(this, args)["queryManager"];
>     var wrappers = queryManager && queryManager[wrapperSymbol];
>     var wrapper = wrappers && wrappers[hookName];
>     var wrappedHook = wrapper ? wrapper(useHook) : useHook;
>     return wrappedHook.apply(this, args);
>   };
> }
207,208c463,469
< import { __assign } from "tslib";
< import { equal } from "@wry/equality";
---
> import { __assign as __assign3, __spreadArray as __spreadArray2 } from "tslib";
> import * as React6 from "rehackt";
> 
> import { Trie } from "@wry/trie";
> 
> import { __assign as __assign2 } from "tslib";
> import { equal as equal2 } from "@wry/equality";
322c583
<         return !equal(
---
>         return !equal2(
342,343c603,604
<           this.result = __assign(
<             __assign({}, this.result),
---
>           this.result = __assign2(
>             __assign2({}, this.result),
447c708
<           return !equal(result.data, {}) && !equal(result, _this.result);
---
>           return !equal2(result.data, {}) && !equal2(result, _this.result);
453c714
<       if (equal(result, this.result)) {
---
>       if (equal2(result, this.result)) {
474a736,885
> var SuspenseCache =
>   /** @class */
>   (function () {
>     function SuspenseCache2(options) {
>       if (options === void 0) {
>         options = /* @__PURE__ */ Object.create(null);
>       }
>       this.queryRefs = new Trie(canUseWeakMap);
>       this.options = options;
>     }
>     SuspenseCache2.prototype.getQueryRef = function (
>       cacheKey,
>       createObservable
>     ) {
>       var ref = this.queryRefs.lookupArray(cacheKey);
>       if (!ref.current) {
>         ref.current = new InternalQueryReference(createObservable(), {
>           autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
>           onDispose: function () {
>             delete ref.current;
>           },
>         });
>       }
>       return ref.current;
>     };
>     return SuspenseCache2;
>   })();
> 
> var suspenseCacheSymbol = Symbol.for("apollo.suspenseCache");
> function getSuspenseCache(client) {
>   var _a;
>   if (!client[suspenseCacheSymbol]) {
>     client[suspenseCacheSymbol] = new SuspenseCache(
>       (_a = client.defaultOptions.react) === null || _a === void 0
>         ? void 0
>         : _a.suspense
>     );
>   }
>   return client[suspenseCacheSymbol];
> }
> 
> var skipToken = Symbol.for("apollo.skipToken");
> 
> function useSuspenseQuery(query, options) {
>   if (options === void 0) {
>     options = /* @__PURE__ */ Object.create(null);
>   }
>   var client = useApolloClient(options.client);
>   var suspenseCache = getSuspenseCache(client);
>   var watchQueryOptions = useWatchQueryOptions({
>     client,
>     query,
>     options,
>   });
>   var fetchPolicy = watchQueryOptions.fetchPolicy,
>     variables = watchQueryOptions.variables;
>   var _a = options.queryKey,
>     queryKey = _a === void 0 ? [] : _a;
>   var cacheKey = __spreadArray2(
>     [query, canonicalStringify(variables)],
>     [].concat(queryKey),
>     true
>   );
>   var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
>     return client.watchQuery(watchQueryOptions);
>   });
>   var _b = React6.useState([queryRef.key, queryRef.promise]),
>     current = _b[0],
>     setPromise = _b[1];
>   if (current[0] !== queryRef.key) {
>     current[0] = queryRef.key;
>     current[1] = queryRef.promise;
>   }
>   var promise = current[1];
>   if (queryRef.didChangeOptions(watchQueryOptions)) {
>     current[1] = promise = queryRef.applyOptions(watchQueryOptions);
>   }
>   React6.useEffect(
>     function () {
>       var dispose = queryRef.retain();
>       var removeListener = queryRef.listen(function (promise2) {
>         setPromise([queryRef.key, promise2]);
>       });
>       return function () {
>         removeListener();
>         dispose();
>       };
>     },
>     [queryRef]
>   );
>   var skipResult = React6.useMemo(
>     function () {
>       var error = toApolloError(queryRef.result);
>       return {
>         loading: false,
>         data: queryRef.result.data,
>         networkStatus: error ? NetworkStatus.error : NetworkStatus.ready,
>         error,
>       };
>     },
>     [queryRef.result]
>   );
>   var result = fetchPolicy === "standby" ? skipResult : __use(promise);
>   var fetchMore = React6.useCallback(
>     function (options2) {
>       var promise2 = queryRef.fetchMore(options2);
>       setPromise([queryRef.key, queryRef.promise]);
>       return promise2;
>     },
>     [queryRef]
>   );
>   var refetch = React6.useCallback(
>     function (variables2) {
>       var promise2 = queryRef.refetch(variables2);
>       setPromise([queryRef.key, queryRef.promise]);
>       return promise2;
>     },
>     [queryRef]
>   );
>   var subscribeToMore = React6.useCallback(
>     function (options2) {
>       return queryRef.observable.subscribeToMore(options2);
>     },
>     [queryRef]
>   );
>   return React6.useMemo(
>     function () {
>       return {
>         client,
>         data: result.data,
>         error: toApolloError(result),
>         networkStatus: result.networkStatus,
>         fetchMore,
>         refetch,
>         subscribeToMore,
>       };
>     },
>     [client, fetchMore, refetch, result, subscribeToMore]
>   );
> }
> var wrapped = /* @__PURE__ */ makeHookWrappable(
>   "useSuspenseQuery",
>   useSuspenseQuery,
>   function (_, options) {
>     return useApolloClient(
>       typeof options === "object" ? options.client : void 0
>     );
>   }
> );
> useSuspenseQuery = wrapped;
479a891,923
> function useWatchQueryOptions(_a) {
>   var client = _a.client,
>     query = _a.query,
>     options = _a.options;
>   return useDeepMemo(
>     function () {
>       var _a2;
>       if (options === skipToken) {
>         return { query, fetchPolicy: "standby" };
>       }
>       var fetchPolicy =
>         options.fetchPolicy ||
>         ((_a2 = client.defaultOptions.watchQuery) === null || _a2 === void 0
>           ? void 0
>           : _a2.fetchPolicy) ||
>         "cache-first";
>       var watchQueryOptions = __assign3(__assign3({}, options), {
>         fetchPolicy,
>         query,
>         notifyOnNetworkStatusChange: false,
>         nextFetchPolicy: void 0,
>       });
>       if (false) {
>         validateOptions(watchQueryOptions);
>       }
>       if (options.skip) {
>         watchQueryOptions.fetchPolicy = "standby";
>       }
>       return watchQueryOptions;
>     },
>     [client, options, query]
>   );
> }
481c925
< import * as React4 from "rehackt";
---
> import * as React7 from "rehackt";
483c927
<   var internalQueryRef = React4.useMemo(
---
>   var internalQueryRef = React7.useMemo(
489c933
<   var getPromise = React4.useCallback(
---
>   var getPromise = React7.useCallback(
499c943
<   React4.useEffect(
---
>   React7.useEffect(
506c950
<     React4.useCallback(
---
>     React7.useCallback(
519c963
<   return React4.useMemo(
---
>   return React7.useMemo(
529a974,981
> var wrapped2 = /* @__PURE__ */ makeHookWrappable(
>   "useReadQuery",
>   useReadQuery,
>   function (ref) {
>     return unwrapQueryRef(ref)["observable"];
>   }
> );
> useReadQuery = wrapped2;

It seems that against better judgement, it's pulling this in:

var wrapped = /* @__PURE__ */ makeHookWrappable(
  "useSuspenseQuery",
  useSuspenseQuery,
  function (_, options) {
    return useApolloClient(
      typeof options === "object" ? options.client : void 0
    );
  }
);
useSuspenseQuery = wrapped;

and then everything trickles from there - although useSuspenseQuery is not referenced anywhere in the actually exported code.

Really, though, I would expect a diff much more like this:

0a1,4
> import { invariant as originalInvariant, InvariantError } from "ts-invariant";
> 
> var version = "0.0.0-pr-11617-20240226102810";
> 
204,205c450,461
< import { __assign as __assign2, __spreadArray as __spreadArray2 } from "tslib";
< import * as React3 from "rehackt";
---
> var wrapperSymbol = Symbol.for("apollo.hook.wrappers");
> // @__NO_SIDE_EFFECTS__
> function makeHookWrappable(hookName, useHook, getClientFromOptions) {
>   return function () {
>     var args = arguments;
>     var queryManager = getClientFromOptions.apply(this, args)["queryManager"];
>     var wrappers = queryManager && queryManager[wrapperSymbol];
>     var wrapper = wrappers && wrappers[hookName];
>     var wrappedHook = wrapper ? wrapper(useHook) : useHook;
>     return wrappedHook.apply(this, args);
>   };
> }
529a974,981
> var wrapped2 = /* @__PURE__ */ makeHookWrappable(
>   "useReadQuery",
>   useReadQuery,
>   function (ref) {
>     return unwrapQueryRef(ref)["observable"];
>   }
> );
> useReadQuery = wrapped2;

This is the PR adding that code:

apollographql/apollo-client#11617

The irritating thing here is that I've added this "wrapping" behaviour to five hooks, but only one of them doesn't shake out.

Am I missing something obvious here, or is this a quirk (or even bug) in esbuild?

[phryneas]

@Andarist has figured this one out and fixed it with this PR - eslint seems to only shake on a per-file level and couldn't see a file as pure anymore: apollographql/apollo-client#11622