Error in DHIS2 PWA Example useCacheableSection with ID

Dears,

I am developing a DHIS2 web app and attempted to run the PWA example from this repository (app-platform/examples/pwa-app at master · dhis2/app-platform · GitHub). However, I encountered an error in the developer console, which points to the following line in the cachable-section-state.js file of the @dhis2/app-runtime package, causing the issue.

const [status] = useGlobalState(state => state.cachedSections[id]);

Here is a stack trace

Cannot read properties of undefined (reading 'section-id-01')
TypeError: Cannot read properties of undefined (reading 'section-id-01')
    at http://localhost:3000/static/js/bundle.js:28760:119
    at useGlobalState (http://localhost:3000/static/js/bundle.js:29652:93)
    at useCachedSection (http://localhost:3000/static/js/bundle.js:28760:89)
    at useCacheableSection (http://localhost:3000/static/js/bundle.js:28833:81)
    at Controls (http://localhost:3000/static/js/app.chunk.js:658:78)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:105624:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:107953:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:108890:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:92927:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:92971:20)

Could anyone suggest a solution? Thank you.

Hi @Belendia

Welcome to the community!

It looks like this requires a bit more configuration, would you check this docs out and give it a second try: app-runtime/docs/advanced/offline/CacheableSections.md at master · dhis2/app-runtime · GitHub?

Tagging @kpvandivier for insights on this… :pray:

Hi @Belendia! Thanks for your interest in the PWA features :slight_smile:

I haven’t been able to reproduce that problem myself – can you let me know what kind of context you ran into this in? Answers to these questions can help me troubleshoot:

  1. Before starting the PWA app, did you run yarn && yarn build in the root of the app-platform repository?
  2. What browser are you using? Is it in a private browsing environment?
  3. What version of the app-platform repository are you using?

Other than that, let me know you if have any other questions about the PWA example app or the platform offline features! :slight_smile:

Hi @kpvandivier,

Thanks for your response. Here are my answers to your questions:

1. Before starting the PWA app, did you run yarn && yarn build in the root of the app-platform repository?
Yes, I did.

2. What browser are you using? Is it in a private browsing environment?
I am using Chrome without private browsing.

3. What version of the app-platform repository are you using?

  • @dhis2/cli-app-scripts: 11.2.2
  • @dhis2/app-runtime: 3.10.4
  • @dhis2/app-service-datastore: 1.0.0-beta.3

Here is my GitHub repo: https://github.com/Belendia/dhis2-ui-library-task.git, and the issue starts to emerge in this file: PWDVis.js.

Thank you,
Belendia