fix(storage-rn): Fix interop imports for CommonJS and update React im…

…ports (#3251)

.changeset/mean-tips-fetch.md

@@ -0,0 +1,7 @@
+---
+'urql': patch
+'next-urql': patch
+'@urql/storage-rn': patch
+---
+
+Switch `react` imports to namespace imports, and update build process for CommonJS outputs to interoperate with `__esModule` marked modules again.

package.json

@@ -66,8 +66,8 @@
     "@changesets/get-github-info": "0.5.2",
     "@npmcli/arborist": "^6.2.5",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/pluginutils": "^5.0.2",

packages/next-urql/src/with-urql-client.ts

@@ -1,11 +1,5 @@
-import {
-  createElement,
-  useCallback,
-  useReducer,
-  useMemo,
-  ReactNode,
-  ReactElement,
-} from 'react';
+import type { ReactNode, ReactElement } from 'react';
+import * as React from 'react';
 
 import {
   Provider,
@@ -85,10 +79,10 @@ export function withUrqlClient(
       urqlState,
       ...rest
     }: WithUrqlProps) => {
-      const [version, forceUpdate] = useReducer(prev => prev + 1, 0);
+      const [version, forceUpdate] = React.useReducer(prev => prev + 1, 0);
       const urqlServerState = (pageProps && pageProps.urqlState) || urqlState;
 
-      const client = useMemo(() => {
+      const client = React.useMemo(() => {
         if (urqlClient && !version) {
           return urqlClient;
         }
@@ -116,16 +110,16 @@ export function withUrqlClient(
         return initUrqlClient(clientConfig, shouldEnableSuspense)!;
       }, [urqlClient, urqlServerState, version]);
 
-      const resetUrqlClient = useCallback(() => {
+      const resetUrqlClient = React.useCallback(() => {
         resetClient();
         ssr = ssrExchange({ initialState: undefined });
         forceUpdate();
       }, []);
 
-      return createElement(
+      return React.createElement(
         Provider,
         { value: client },
-        createElement(AppOrPage, {
+        React.createElement(AppOrPage, {
           ...rest,
           pageProps,
           urqlClient: client,
@@ -189,7 +183,7 @@ export function withUrqlClient(
 
         // Run the prepass step on AppTree. This will run all urql queries on the server.
         if (!options!.neverSuspend) {
-          await ssrPrepass(createElement(AppTree, appTreeProps));
+          await ssrPrepass(React.createElement(AppTree, appTreeProps));
         }
 
         return {

packages/react-urql/src/context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import * as React from 'react';
 import { Client } from '@urql/core';
 
 const OBJ = {};
@@ -10,7 +10,7 @@ const OBJ = {};
  * You may use the reexported {@link Provider} to provide a `Client` as well.
  */
 export const Context: import('react').Context<Client | object> =
-  createContext(OBJ);
+  React.createContext(OBJ);
 
 /** Provider for `urql`'s {@link Client} to GraphQL hooks.
  *
@@ -39,15 +39,13 @@ export const Context: import('react').Context<Client | object> =
  * );
  * ```
  */
-export const Provider: import('react').Provider<Client | object> =
-  Context.Provider;
+export const Provider: React.Provider<Client | object> = Context.Provider;
 
 /** React Consumer component, providing the {@link Client} provided on a parent component.
  * @remarks
  * This is an alias for {@link Context.Consumer}.
  */
-export const Consumer: import('react').Consumer<Client | object> =
-  Context.Consumer;
+export const Consumer: React.Consumer<Client | object> = Context.Consumer;
 
 Context.displayName = 'UrqlContext';
 
@@ -65,7 +63,7 @@ Context.displayName = 'UrqlContext';
  * not wrapped in a {@link Provider}, an error is thrown.
  */
 export const useClient = (): Client => {
-  const client = useContext(Context);
+  const client = React.useContext(Context);
 
   if (client === OBJ && process.env.NODE_ENV !== 'production') {
     const error =

packages/react-urql/src/hooks/useMutation.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
+import * as React from 'react';
 import { pipe, onPush, filter, toPromise, take } from 'wonka';
 
 import {
@@ -144,13 +144,13 @@ export function useMutation<
   Data = any,
   Variables extends AnyVariables = AnyVariables
 >(query: DocumentInput<Data, Variables>): UseMutationResponse<Data, Variables> {
-  const isMounted = useRef(true);
+  const isMounted = React.useRef(true);
   const client = useClient();
 
   const [state, setState] =
-    useState<UseMutationState<Data, Variables>>(initialState);
+    React.useState<UseMutationState<Data, Variables>>(initialState);
 
-  const executeMutation = useCallback(
+  const executeMutation = React.useCallback(
     (variables: Variables, context?: Partial<OperationContext>) => {
       deferDispatch(setState, { ...initialState, fetching: true });
       return pipe(
@@ -179,7 +179,7 @@ export function useMutation<
     [client, query, setState]
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;

packages/react-urql/src/hooks/useQuery.ts

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import { Source, pipe, subscribe, onEnd, onPush, takeWhile } from 'wonka';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import * as React from 'react';
 
 import {
   GraphQLRequestParams,
@@ -221,7 +221,7 @@ export function useQuery<
   const suspense = isSuspense(client, args.context);
   const request = useRequest(args.query, args.variables as Variables);
 
-  const source = useMemo(() => {
+  const source = React.useMemo(() => {
     if (args.pause) return null;
 
     const source = client.executeQuery(request, {
@@ -247,7 +247,7 @@ export function useQuery<
     args.context,
   ]);
 
-  const getSnapshot = useCallback(
+  const getSnapshot = React.useCallback(
     (
       source: Source<OperationResult<Data, Variables>> | null,
       suspense: boolean
@@ -294,7 +294,7 @@ export function useQuery<
     args.pause,
   ] as const;
 
-  const [state, setState] = useState(
+  const [state, setState] = React.useState(
     () =>
       [
         source,
@@ -315,7 +315,7 @@ export function useQuery<
     ]);
   }
 
-  useEffect(() => {
+  React.useEffect(() => {
     const source = state[0];
     const request = state[2][1];
 
@@ -351,7 +351,7 @@ export function useQuery<
     }
   }, [cache, state[0], state[2][1]]);
 
-  const executeQuery = useCallback(
+  const executeQuery = React.useCallback(
     (opts?: Partial<OperationContext>) => {
       const context = {
         requestPolicy: args.requestPolicy,

packages/react-urql/src/hooks/useRequest.ts

@@ -1,4 +1,4 @@
-import { useRef, useMemo } from 'react';
+import * as React from 'react';
 import {
   AnyVariables,
   DocumentInput,
@@ -16,9 +16,11 @@ export function useRequest<
   query: DocumentInput<Data, Variables>,
   variables: Variables
 ): GraphQLRequest<Data, Variables> {
-  const prev = useRef<undefined | GraphQLRequest<Data, Variables>>(undefined);
+  const prev = React.useRef<undefined | GraphQLRequest<Data, Variables>>(
+    undefined
+  );
 
-  return useMemo(() => {
+  return React.useMemo(() => {
     const request = createRequest<Data, Variables>(query, variables);
     // We manually ensure reference equality if the key hasn't changed
     if (prev.current !== undefined && prev.current.key === request.key) {

packages/react-urql/src/hooks/useSubscription.ts

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import { pipe, subscribe, onEnd } from 'wonka';
-import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import * as React from 'react';
 
 import {
   GraphQLRequestParams,
@@ -233,20 +233,20 @@ export function useSubscription<
   const client = useClient();
   const request = useRequest(args.query, args.variables as Variables);
 
-  const handlerRef = useRef<SubscriptionHandler<Data, Result> | undefined>(
-    handler
-  );
+  const handlerRef = React.useRef<
+    SubscriptionHandler<Data, Result> | undefined
+  >(handler);
   handlerRef.current = handler;
 
-  const source = useMemo(
+  const source = React.useMemo(
     () =>
       !args.pause ? client.executeSubscription(request, args.context) : null,
     [client, request, args.pause, args.context]
   );
 
   const deps = [client, request, args.context, args.pause] as const;
 
-  const [state, setState] = useState(
+  const [state, setState] = React.useState(
     () => [source, { ...initialState, fetching: !!source }, deps] as const
   );
 
@@ -259,7 +259,7 @@ export function useSubscription<
     ]);
   }
 
-  useEffect(() => {
+  React.useEffect(() => {
     const updateResult = (
       result: Partial<UseSubscriptionState<Data, Variables>>
     ) => {
@@ -291,7 +291,7 @@ export function useSubscription<
   }, [state[0]]);
 
   // This is the imperative execute function passed to the user
-  const executeSubscription = useCallback(
+  const executeSubscription = React.useCallback(
     (opts?: Partial<OperationContext>) => {
       const source = client.executeSubscription(request, {
         ...args.context,

packages/storage-rn/package.json

@@ -55,8 +55,8 @@
   "devDependencies": {
     "@urql/core": "workspace:*",
     "@urql/exchange-graphcache": "workspace:*",
-    "@react-native-async-storage/async-storage": "^1.15.5",
-    "@react-native-community/netinfo": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+    "@react-native-async-storage/async-storage": "^1.18.2",
+    "@react-native-community/netinfo": "^9.3.10"
   },
   "publishConfig": {
     "access": "public",