usePageLoadingContext not working

bogdan2510 · March 9, 2022, 2:34am

I’m trying to use usePageLoadingContext fallowing documentation instruction.
I get this error:

Im using RW 0.48.0 with yarn 3.

dthyresson · March 9, 2022, 11:49am

I can see that the error message comes from:

redwoodjs/redwood/blob/d48f4bb1ebf61b67da8137c0f87bec816dc7de75/packages/router/src/PageLoadingContext.tsx#L19

    
      
          const PageLoadingContext =
            createNamedContext<PageLoadingContextInterface>('PageLoading')
          
          
export const PageLoadingContextProvider = PageLoadingContext.Provider
          
          
export const usePageLoadingContext = () => {
            const pageLoadingContext = useContext(PageLoadingContext)
          
          
  if (!pageLoadingContext) {
              throw new Error(
                'usePageLoadingContext must be used within a PageLoadingContext provider'
              )
            }
          
          
  return pageLoadingContext
          }

I haven’t actually used that before, so I had to look it up in the docs here:

And I tried it v0.49.1 as well and got

I’ll write up an issue – or perhaps the docs are incomplete.

Thanks for letting us know!

Issue here: Error: usePageLoadingContext must be used within a PageLoadingContext provider · Issue #4705 · redwoodjs/redwood · GitHub

dom · May 11, 2022, 2:22pm

I believe I have a workaround for it in this comment here Error: usePageLoadingContext must be used within a PageLoadingContext provider · Issue #4705 · redwoodjs/redwood · GitHub

// web/src/pages/HomePage/HomePage.test.js

// Import the PageLoadingContext from the router
import { PageLoadingContext } from '@redwoodjs/router'
import { render } from '@redwoodjs/testing/web'
import HomePage from './HomePage'

describe('HomePage', () => {
  it('renders successfully', () => {
    expect(() => {
      render(
        // Wrap the component (a page in this case) in the PageLoadingContext.Provider
        // with the desired value
        <PageLoadingContext.Provider value={{ loading: true }}>
          <HomePage />
        </PageLoadingContext.Provider>
      )
    }).not.toThrow()
  })
})