diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml index b60d2820..65474e3d 100644 --- a/.github/workflows/integration.yml +++ b/.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 diff --git a/src/use-auth0-suspense.tsx b/src/use-auth0-suspense.tsx index c727f915..b86c3418 100644 --- a/src/use-auth0-suspense.tsx +++ b/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 = ( ); } - const ctx = React.useContext(context) as Auth0ContextInterface; + const ctx = useContext(context) as Auth0ContextInterface; if (!ctx._initPromise) { throw new Error( @@ -61,7 +63,7 @@ const useAuth0Suspense = ( // 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;