Error in DHIS2 PWA Example useCacheableSection with ID

Development - Développement
1

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.

2

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:

3

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:

4

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

5

Thanks for sharing that info!

I took a look at your repository, and I think I spotted a typo that may be causing the issue in this line: dhis2-ui-library-task/d2.config.js at e49fbaf3f9832153514845399e40cd5c15be2c9b · Belendia/dhis2-ui-library-task · GitHub

The correct pwa property should be called “enabled”; i.e. the config should look like:

// d2.config.js
const config = {
    // ...
    pwa: {
        enabled: true,
        // ...
    },
}

I think that should fix it; give it a try! :slight_smile:

2 Likes
6

Thank you so much for taking the time to review my repository and for pointing out the typo. I appreciate your keen eye.

I have corrected the pwa property to “enabled” as you suggested, and it works perfectly now.

Thank you and warm regards

Belendia

7

Awesome, great to hear! :smiley: Happy to help :slight_smile: