local CMS changes not reflected online

[stephaniedavidson]

Describe the bug
In my CMS I've added a video and vimeo widget for the post body, which are working locally (gatsby develop -> localhost:8000/admin). I also updated the Netlify CMS version so I don't get the prompt to recover a blog post every time I go to "new post". All working great locally. I can see the changes reflected in my github repo.

Problem is on my live site (....netlify.app/admin) the changes are erratic. On netlify.app several times I could not see the vimeo/video body option and I was getting the recover post prompt. If I clear my cache the recovery prompt disappears, and I can see my vimeo/video body options, but I would say every few hours I lose those changes and I'm not sure what's triggering it. Wondering if there's a cache I don't know about that I need to delete, or something I need to add to the config, or if this problem is coming from running gatsby build.

To Reproduce
Sorry but not sure how you could reproduce this because my repo is configured to netlify but here's my repo: https://github.com/stephaniedavidson/portfolio
I do not have any branches, only working on master.

Expected behavior
I expect to see my changes reflected live.

screengrabs

Applicable Versions:
"netlify-cms-app": "^2.12.15"
github
windows 10
chrome

CMS configuration

backend:
  name: github
  repo: stephaniedavidson/portfolio
  branch: master

slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "_"

media_folder: static/assets
public_folder: /assets

collections:
  - name: work
    label: Work
    label_singular: "Work"
    folder: content
    create: true
    path: "{{slug}}/index"
    identifier_field: title
    media_folder: ""
    public_folder: ""
    fields:
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: "tags", label: "Tags", widget: "list" }
      - { name: cover, label: "Cover image", widget: file }
      - { name: body, label: Body, widget: markdown }

[erezrokah]

Hi @stephaniedavidson, does the same behaviour occurs when running gatsby clean, gatsby build and then gatsby serve?
If so, can you trying triggering a manual build from Netlify with the clear cache option?

[stephaniedavidson]

Hi sorry responding to you on netlify community and here, yes did those commands and pushed to master, still the same problem. No errors in netlify build.
Behaviour is: I type in admin url online, and I do not see the CMS changes. I clear my cache for the page and refresh, and I do see them. When I type in the admin url again, the changes are gone.

I have one console error which is: "react-dom.production.min.js:131 GET https://..../admin/cms.css net::ERR_ABORTED 404"
a bug that seems to have been fixed 2 years ago, which is strange bc I'm using the latest version of netlify cms.

[erezrokah]

Closing this issue in favour https://community.netlify.com/t/netlify-cms-updated-locally-but-not-on-netlify/17754.
The culprit seems to be gatsby-plugin-offline

[tranlehaiquan]

For anyone visit. You no need to uninstall gatsby-plugin-offline. The reason that gatsby use workbox for service worker and default config of it have a Regex /(\.js$|\.css$|static\/)/ -> It will cache every request have static in URL.

How to fix?
Use this config for gatsby-plugin-offline

{
  resolve: 'gatsby-plugin-offline',
  options: {
    workboxConfig: {
      runtimeCaching: [{
          // Use cacheFirst since these don't need to be revalidated (same RegExp
          // and same reason as above)
          urlPattern: /(\.js$|\.css$|[^:]static\/)/,
          handler: `CacheFirst`,
        },
        {
          // page-data.json files, static query results and app-data.json
          // are not content hashed
          urlPattern: /^https?:.*\/page-data\/.*\.json/,
          handler: `StaleWhileRevalidate`,
        },
        {
          // Add runtime caching of various other page resources
          urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
          handler: `StaleWhileRevalidate`,
        },
        {
          // Google Fonts CSS (doesn't end in .css so we need to specify it)
          urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
          handler: `StaleWhileRevalidate`,
        },
      ],
    },
  },
},