Shopify · jplhomer · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022
diff --git a/.changeset/clean-lies-greet.md b/.changeset/clean-lies-greet.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Rename internal Hydrogen global variables that could conflict with third party libraries that use the same names.
diff --git a/jest.config.ts b/jest.config.ts
@@ -18,8 +18,8 @@ const config: Config.InitialOptions = {
   watchPathIgnorePatterns: ['<rootDir>/temp', 'fixtures'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
   globals: {
-    __DEV__: true,
-    __TEST__: true,
+    __HYDROGEN_DEV__: true,
+    __HYDROGEN_TEST__: true,
     'ts-jest': {
       tsconfig: './packages/hydrogen/tsconfig.json',
     },

diff --git a/packages/hydrogen/src/components/Image/Image.tsx b/packages/hydrogen/src/components/Image/Image.tsx
@@ -14,7 +14,7 @@ export function Image<GenericLoaderOpts>(props: ImageProps<GenericLoaderOpts>) {
     throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
   }
 
-  if (__DEV__ && props.data && props.src) {
+  if (__HYDROGEN_DEV__ && props.data && props.src) {
     console.warn(
       `<Image/>: using both 'data' and 'src' props is not supported; using the 'data' prop by default`
     );
@@ -77,7 +77,7 @@ function ShopifyImage({
     throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
   }
 
-  if (__DEV__ && !data.altText && !rest.alt) {
+  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {
     console.warn(
       `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${`Image: ${
         data.id ?? data.url
@@ -90,7 +90,7 @@ function ShopifyImage({
     loaderOptions
   );
 
-  if ((__DEV__ && !finalWidth) || !finalHeight) {
+  if ((__HYDROGEN_DEV__ && !finalWidth) || !finalHeight) {
     console.warn(
       `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${
         data.id ?? data.url
@@ -194,7 +194,7 @@ function ExternalImage<GenericLoaderOpts>({
     );
   }
 
-  if (__DEV__ && !alt) {
+  if (__HYDROGEN_DEV__ && !alt) {
     console.warn(
       `<Image/>: when 'src' is provided, 'alt' should also be provided. ${`Image: ${src}`}`
     );

diff --git a/packages/hydrogen/src/entry-client.tsx b/packages/hydrogen/src/entry-client.tsx
@@ -38,7 +38,7 @@ const renderHydrogen: ClientHandler = async (ClientWrapper) => {
     config = JSON.parse(root.dataset.clientConfig ?? '{}');
   } catch (error: any) {
     config = {};
-    if (__DEV__) {
+    if (__HYDROGEN_DEV__) {
       console.warn(
         'Could not parse client configuration in browser',
         error.message
@@ -68,7 +68,7 @@ const renderHydrogen: ClientHandler = async (ClientWrapper) => {
     </>,
     {
       onRecoverableError(e: any) {
-        if (__DEV__ && !hasCaughtError) {
+        if (__HYDROGEN_DEV__ && !hasCaughtError) {
           hasCaughtError = true;
           console.log(
             `React encountered an error while attempting to hydrate the application. ` +

diff --git a/packages/hydrogen/src/entry-server.tsx b/packages/hydrogen/src/entry-server.tsx
@@ -54,7 +54,7 @@ declare global {
   // This is provided by a Vite plugin
   // and will trigger tree-shaking.
   // eslint-disable-next-line no-var
-  var __WORKER__: boolean;
+  var __HYDROGEN_WORKER__: boolean;
 }
 
 const DOCTYPE = '<!DOCTYPE html>';
@@ -193,7 +193,7 @@ export const renderHydrogen = (App: any) => {
     });
   };
 
-  if (__WORKER__) return handleRequest;
+  if (__HYDROGEN_WORKER__) return handleRequest;
 
   return ((rawRequest, options) =>
     handleFetchResponseInNode(
@@ -311,7 +311,7 @@ async function runSSR({
       })
     : rscReadableForFlight;
 
-  if (__WORKER__) {
+  if (__HYDROGEN_WORKER__) {
     const encoder = new TextEncoder();
     const transform = new TransformStream();
     const writable = transform.writable.getWriter();
@@ -670,7 +670,7 @@ async function createNodeWriter() {
   // when building for workers, even though this code
   // does not run in a worker. Looks like tree-shaking
   // kicks in after the import analysis/bundle.
-  const streamImport = __WORKER__ ? '' : 'stream';
+  const streamImport = __HYDROGEN_WORKER__ ? '' : 'stream';
   const {PassThrough} = await import(streamImport);
   return new PassThrough() as InstanceType<typeof PassThroughType>;
 }

diff --git a/packages/hydrogen/src/foundation/ServerPropsProvider/ServerPropsProvider.tsx b/packages/hydrogen/src/foundation/ServerPropsProvider/ServerPropsProvider.tsx
@@ -10,9 +10,9 @@ import React, {
 
 declare global {
   // eslint-disable-next-line no-var
-  var __DEV__: boolean;
+  var __HYDROGEN_DEV__: boolean;
   // eslint-disable-next-line no-var
-  var __TEST__: boolean;
+  var __HYDROGEN_TEST__: boolean;
 }
 
 const PRIVATE_PROPS = ['request', 'response'] as const;
@@ -130,7 +130,7 @@ export function ServerPropsProvider({
       newValue = input;
     }
 
-    if (__DEV__) {
+    if (__HYDROGEN_DEV__) {
       const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
       if (privateProp) {
         console.warn(

diff --git a/packages/hydrogen/src/foundation/ServerRequestProvider/ServerRequestProvider.tsx b/packages/hydrogen/src/foundation/ServerRequestProvider/ServerRequestProvider.tsx
@@ -33,7 +33,7 @@ function getCacheForType(resource: () => Map<any, any>) {
       .ReactCurrentDispatcher.current;
 
   // @ts-ignore
-  if (__TEST__ && !dispatcher.getCacheForType) {
+  if (__HYDROGEN_TEST__ && !dispatcher.getCacheForType) {
     // Jest does not have access to the RSC runtime, mock it here:
     // @ts-ignore
     return (globalThis.__jestRscCache ??= resource());
@@ -82,7 +82,7 @@ export function useServerRequest() {
 
   if (!request) {
     // @ts-ignore
-    if (__TEST__) {
+    if (__HYDROGEN_TEST__) {
       // Unit tests are not wrapped in ServerRequestProvider.
       // This mocks it, instead of providing it in every test.
       return {ctx: {}} as ServerComponentRequest;

diff --git a/packages/hydrogen/src/foundation/ServerStateProvider/ServerStateProvider.tsx b/packages/hydrogen/src/foundation/ServerStateProvider/ServerStateProvider.tsx
@@ -9,7 +9,7 @@ import React, {
 
 declare global {
   // eslint-disable-next-line no-var
-  var __DEV__: boolean;
+  var __HYDROGEN_DEV__: boolean;
 }
 
 const PRIVATE_PROPS = ['request', 'response'] as const;
@@ -105,7 +105,7 @@ export function ServerStateProvider({
 
     if (!newValue) return {...prev};
 
-    if (__DEV__) {
+    if (__HYDROGEN_DEV__) {
       const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
       if (privateProp) {
         console.warn(

diff --git a/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts b/packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts
@@ -98,9 +98,9 @@ export default () => {
       },
 
       define: {
-        __DEV__: env.mode !== 'production',
-        __WORKER__: isWorker,
-        __TEST__: false, // Used in unit tests
+        __HYDROGEN_DEV__: env.mode !== 'production',
+        __HYDROGEN_WORKER__: isWorker,
+        __HYDROGEN_TEST__: false, // Used in unit tests
       },
 
       envPrefix: ['VITE_', 'PUBLIC_'],

diff --git a/packages/hydrogen/src/hooks/useShopQuery/hooks.ts b/packages/hydrogen/src/hooks/useShopQuery/hooks.ts
@@ -102,7 +102,7 @@ export function useShopQuery<T>({
     log.error(errorMessage);
     log.error(useQueryError);
 
-    if (__DEV__ && !__TEST__) {
+    if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
       throw new Error(errorMessage);
     } else {
       // in non-dev environments, we probably don't want super-detailed error messages for the user
@@ -120,7 +120,7 @@ export function useShopQuery<T>({
     const errors = Array.isArray(data.errors) ? data.errors : [data.errors];
 
     for (const error of errors) {
-      if (__DEV__ && !__TEST__) {
+      if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
         throw new Error(error.message);
       } else {
         log.error('GraphQL Error', error);
@@ -130,7 +130,7 @@ export function useShopQuery<T>({
   }
 
   if (
-    __DEV__ &&
+    __HYDROGEN_DEV__ &&
     log.options().showUnusedQueryProperties &&
     query &&
     data?.data

diff --git a/packages/hydrogen/src/utilities/graphql-tracker.ts b/packages/hydrogen/src/utilities/graphql-tracker.ts
@@ -22,7 +22,7 @@ export function injectGraphQLTracker({
   data,
   onUnusedData,
 }: TrackerParams) {
-  if (__DEV__ && typeof query === 'string') {
+  if (__HYDROGEN_DEV__ && typeof query === 'string') {
     query = gqlDev`${query}`;
   }