refresh infinite loop issue

[Bhirahaspathi-Sairam]

I installed the package and I tested it in my react app. I am not sure for some reason the react app keeps refreshing again and again. How can this issue be resolved?

[janguianodev]

I'm facing with the same issue

[dev-ishwar]

I'm also facing the same issue when I enable the reloadOnDowngrade attribute. after the page refresh it keeps showing the version from meta.json as the new version found and keeps reloading the page.
Another issue is that it takes an extra reload (manual) after opening the website in order to see the new changes.
Has anyone found any solution for these issues?

[wizmahesh]

Check package json and change number of version ,
"version": "22.0.0",
increamental, i was facing the same issue, but when i changed it to higher number then infinite loop stopped

[SeanCassiere]

I generally don't really bother with bumping the version in the package.json.
So, I use this postbuild script that automatically generates the meta.json file by appending the git commit hash to the end of the app version stated in the package.json.

// post-build.cjs
const fs = require("fs");
const cp = require("child_process");

const packageJson = require("./package.json");

const commitHash = cp
  .execSync("git rev-parse --short HEAD")
  .toString()
  .replace("\n", "");

const meta = {
  version: packageJson.version + "-" + commitHash,
};
const data = JSON.stringify(meta);

if (fs.existsSync("dist")) {
  fs.writeFileSync("dist/meta.json", data, { encoding: "utf8" });
  console.log('postbuild: Wrote application metadata to "dist/meta.json"');
  console.log("postbuild:", data);
}

// package.json
{
  "scripts": {
    "postbuild": "node ./postbuild.cjs"
  }
}

Then in the app, I inject the same value as an environment variable for the version value passed in the CacheBuster provider. This step changes based on the framework you are using (Webpack, CRA, Vite, etc...).

When using Vite, it looks like this. Other frameworks should have their own injection steps in their documentation, or you could simply use a pre script that writes a file into your src directory with this value.

// vite.config.ts
import cp from "child_process";
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

import packageJson from "./package.json";

const commitHash = cp
  .execSync("git rev-parse --short HEAD")
  .toString()
  .replace("\n", "");

const APP_VERSION = `${packageJson.version}-${commitHash}`;

export default defineConfig({
  plugins: [react()],
  define: {
    "import.meta.env.APP_VERSION": JSON.stringify(APP_VERSION),
  },
});

[fidaay]

This glitch may be due to the browser cache not updating/erasing on refresh and that it keeps caching the old version/file of the react app. So, the script keeps asking for a new version on refresh and it creates a loop because the new version never comes.