fix: update import style in useAuth0Suspense for compatibility with React older version

.github/workflows/integration.yml

@@ -63,9 +63,24 @@ jobs:
       - name: Build SDK
         run: npm run build
 
+      - name: Pack SDK
+        run: npm pack
+
       - name: Install examples
         run: npm run install:examples
 
+      - name: Install local SDK into CRA example
+        run: npm install --prefix=examples/cra-react-router $(ls auth0-auth0-react-*.tgz)
+
+      - name: Build CRA example (production)
+        run: npm run build --prefix=examples/cra-react-router
+
+      - name: Build Next.js example (production)
+        run: npm run build --prefix=examples/nextjs-app
+
+      - name: Build Gatsby example (production)
+        run: npm run build --prefix=examples/gatsby-app
+
       - name: Run integration test (CRA)
         run: npm run test:cra
 

src/use-auth0-suspense.tsx

@@ -1,7 +1,9 @@
-// Namespace import: `use` only exists as a named export from React 19, so
-// `import { use }` fails at link time for React 16-18 consumers even if they
-// never call this hook. Property access stays late-bound.
-import * as React from 'react';
+// Default import, NOT `import * as React`: webpack checks namespace member names
+// against the module's export list, so `React.use` on a namespace binding warns
+// for React 16-18 consumers even if they never call this hook (#1205). A default
+// import is react's module.exports object, so the read is unchecked. Named
+// (`import { use }`) is worse still: it fails at link time.
+import React, { useContext, useMemo } from 'react';
 import { User } from '@auth0/auth0-spa-js';
 import Auth0Context, { Auth0ContextInterface } from './auth0-context';
 
@@ -47,7 +49,7 @@ const useAuth0Suspense = <TUser extends User = User>(
     );
   }
 
-  const ctx = React.useContext(context) as Auth0ContextInterface<TUser>;
+  const ctx = useContext(context) as Auth0ContextInterface<TUser>;
 
   if (!ctx._initPromise) {
     throw new Error(
@@ -61,7 +63,7 @@ const useAuth0Suspense = <TUser extends User = User>(
   // Memoized so the returned object is referentially stable across renders,
   // matching useAuth0, which hands back the provider's memoized context.
   // Without this, `useEffect(..., [auth])` in a consumer re-runs every render.
-  return React.useMemo(() => {
+  return useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { isLoading, _initPromise, ...rest } = ctx;
     return rest;