Reload React application (frontend) after building it

2 years ago

#6026

korzen

I have a React app created with CRA. Every time I deploy it to production and build it, the hashes in the chunk filenames change. At that moment the app fails silently (just shows the user a blank page), and in the console one can find the error, stating a certain chunk file was not found (obviously!).

After the build I need the app to discover that it's been rebuilt and needs to reload, basically.

I've tried a <CacheBuster /> component (react-cache-buster), it observes the app version number in package.json, but it doesn't seem to work. Can you suggest a solution that will work (or perhaps I'm doing this wrong?). This is my App.js code (less the imports and export default App):

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import CacheBuster from 'react-cache-buster';
import { version } from '../../package.json';
import Loading from '../containers/common/loading/Loading';
import '../i18n';
const App = () => {

      const isProduction = process.env.NODE_ENV === 'production';
    
      return (
        <CacheBuster
          currentVersion={version}
          isEnabled={isProduction} //If false, the library is disabled.
          isVerboseMode={false} //If true, the library writes verbose logs to console.
          loadingComponent={
            <Loading loadingText="Refreshing the site. Please wait... " />
          } //If not pass, nothing appears at the time of new version check.
        >
          <Router>
            <React.Suspense fallback={loading}>
              <Switch>
                <Route path="/forgot-password" name="ForgotPassword">
                  <ForgotPassword />
                </Route>
                <Route path="/reset-password" name="ResetPassword">
                  <ResetPassword />
                </Route>
                <Route path="/register" name="Register">
                  <Register />
                </Route>
                <Route path="/login" name="Login">
                  <Login />
                </Route>
                <Route path="/account-activate/:hash" name="ActivateAccount">
                  <ActivateAccount />
                </Route>
                <Route
                  path="/"
                  name="Home"
                  render={props => <TheLayout {...props} />}
                />
              </Switch>
            </React.Suspense>
          </Router>
        </CacheBuster>
      );
    };

index.html:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="TC Performance" />
    <meta name="author" content="CENSORED" />
    <meta name="keyword" content="CENSORED" />
    <title>TC Performance</title>
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="/apple-icon-114x114.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="120x120"
      href="/apple-icon-120x120.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="/apple-icon-144x144.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="/apple-icon-152x152.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/apple-icon-180x180.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="/android-icon-192x192.png"
    />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
    <meta name="theme-color" content="#ffffff" />

    <!-- geotagging -->

  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>

    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

meta.json:

{"version":"1.0.4"}

the build script command:

npm run generate-meta-tag && react-scripts build

javascript

reactjs

dev-to-production

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs