fix build no display after using vite

netlify.toml

@@ -1,4 +1,4 @@
 [build]
   base    = "website"
-  command = "export REACT_APP_BUILD_NO=`git rev-parse --short HEAD` && npm run test && npm run build"
+  command = "export VITE_BUILD_NO=`git rev-parse --short HEAD` && npm run test && npm run build"
   publish = "dist"

website/src/screens/About.tsx

@@ -12,11 +12,15 @@ import { State } from "../types/dictionary-types";
 import { Link } from "react-router-dom";
 import VideoPlayer from "../components/VideoPlayer";
 
-const About = ({ state }: { state: State }) => (
+const About = ({ state }: { state: State }) => {
+  return (
     <div className="width-limiter">
       <Helmet>
         <link rel="canonical" href="https://dictionary.lingdocs.com/about" />
-      <meta name="description" content="About the LingDocs Pashto Dictionary" />
+        <meta
+          name="description"
+          content="About the LingDocs Pashto Dictionary"
+        />
         <title>About - LingDocs Pashto Dictionary</title>
       </Helmet>
       <h2>About</h2>
@@ -43,8 +47,9 @@ const About = ({ state }: { state: State }) => (
         After visiting this dictionary for the first time it will be accessible
         from your browser even without an internet connection. You can also
         {` `}
-      <strong>install it as an app</strong> on your phone or desktop by choosing
-      "Add to Home Screen" on "Install" on your browser menu. It is also
+        <strong>install it as an app</strong> on your phone or desktop by
+        choosing "Add to Home Screen" on "Install" on your browser menu. It is
+        also
         {` `}
         <a href="https://play.google.com/store/apps/details?id=com.lingdocs.pashto.dictionary">
           find and install it on the Google Play Store
@@ -76,9 +81,9 @@ const About = ({ state }: { state: State }) => (
         {state.dictionaryInfo
           ? state.dictionaryInfo.numberOfEntries
           : "about 15,000"}{" "}
-      entries. It is nowhere near as comprehensive or accurate as some of these
-      other sources, but it does strive to present something uniquely accesible
-      to learners through offline web-app availability,
+        entries. It is nowhere near as comprehensive or accurate as some of
+        these other sources, but it does strive to present something uniquely
+        accesible to learners through offline web-app availability,
         inflection/conjugation/phrase-building engine, and smart searching
         algorithms.
       </p>
@@ -107,7 +112,9 @@ const About = ({ state }: { state: State }) => (
       <h4>Source Code</h4>
       <p>
         This dictionary app is open sounce. The code is available{" "}
-      <a href="https://github.com/lingdocs/pashto-dictionary">here on GitHub</a>{" "}
+        <a href="https://github.com/lingdocs/pashto-dictionary">
+          here on GitHub
+        </a>{" "}
         and is licensed under a GPLv3 License.
       </p>
       <h4>Dictionary Content</h4>
@@ -125,10 +132,10 @@ const About = ({ state }: { state: State }) => (
         or government intelligence work.
       </p>
       <p>
-      The LingDocs Pashto Dictionary assumes no responsibility or liability for
-      any errors or omissions in the content of this site. The information
-      contained in this site is provided on an “as is” basis with no guarantees
-      of completeness, accuracy, usefulness or timeliness.
+        The LingDocs Pashto Dictionary assumes no responsibility or liability
+        for any errors or omissions in the content of this site. The information
+        contained in this site is provided on an “as is” basis with no
+        guarantees of completeness, accuracy, usefulness or timeliness.
       </p>
       <p>
         <Link to="/privacy">Privacy Policy</Link>
@@ -142,12 +149,13 @@ const About = ({ state }: { state: State }) => (
           {dayjs(state.dictionaryInfo.release).toString()}
         </p>
       )}
-    {import.meta.env.REACT_APP_BUILD_NO && (
+      {import.meta.env.VITE_BUILD_NO && (
         <p className="small text-muted">
-        App build number: {import.meta.env.REACT_APP_BUILD_NO}
+          App build number: {import.meta.env.VITE_BUILD_NO}
         </p>
       )}
     </div>
-);
+  );
+};
 
 export default About;

website/src/vite-env.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="vite-plugin-pwa/client" />
 
 interface ImportMetaEnv {
-  readonly REACT_APP_BUILD_NO: string;
+  readonly VITE_BUILD_NO: string;
 }
 
 interface ImportMeta {