Cra vite migration

[yrjanaff]

Dette er kun første utkast, og vi blir å jobbe videre med dette for å se om det er noen ting som kan forbedres. Tar gjerne imot en tilbakemelding for evt “bad practice” eller hva som virker bra.

En mulig litt dårlig forklart gjennomgang av det som har blitt gjort:

Package.json
 a. Endrer scripts.

Fjernet CRA bindere
 	i. yarn remove react-scripts react-app-rewired customize-cra

Installerer Vite
 a. yarn add -D vite @vitejs/plugin-react

Legger til vite.config.js i root med alias @
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "node:path";

 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src"),
     },
   },
 });

Lager index.html i root, kopierer index.html fra public dit.

Redigerer index.html
 a. Fjerner alle forekomster av %PUBLIC_URL%
 b. Endrer alle forekomster av %REACT_APP_ENVIRONMENT% til %VITE_ENVIRONMENT%
 c. Legger til <script type="module" src="/src/main.jsx"></script> før body.
 	i. Den script taggen forteller Vite hvilken fil som skal lastes først (/src/main.jsx), og derfra importeres resten av React-appen.

Lager main.jsx i src.
 a. Import "./index.jsx"(wrapper for index.jsx)

Renamer index.js til jsx.
 a. Vite (via esbuild) behandler .js som vanlig JavaScript og forventer at JSX ligger i .jsx

Konverterer alle  CRA "root imports" til vite alias imports med en liten fin command jeg fikk gpt til å lage
 perl -pi -e 's/from\s+([\"\x27])(actions|components|reducers|utils|helpers|images|scss)\//from \1\@\/$2\//g;
  s/import\s+([\"\x27])(actions|components|reducers|utils|helpers|images|scss)\//import \1\@\/$2\//g' \
  $(find src -type f \( -name ".js" -o -name ".jsx" \))
 Den gjør en global søk/erstatt i alle .js og .jsx under src/ for å konvertere CRA root imports  til Vitealias imports.
 Den retter interne imports som peker på prosjektets egne mapper under src/ (typisk actions/, components/, reducers/, utils/, helpers/, images/, scss/) slik at de alltid går via @/....

    OBS denne dekket ikke alle, manuelt endret også i index jsx. blant annet

Erstatter CRA måten å lese env variabler i koden, med hvordan vite gjør det. Igjen en command fra gtp som finner alle de relevante stedene og erstatter.
perl -pi -e 's/process\.env\.REACT_APP_/import.meta.env.VITE_/g' \
 $(find src -type f \( -name ".js" -o -name ".jsx" \))

Endrer env variabler fra REACT_APP_ -> VITE_ 

react-moment skaper problemer. gjør et midlertidig hotfix: bytter ut react-moment med direkte moment(...).format(...) (med isValid()-guard) kun der react moment brukes. Dette må sjekkes om har noen implikasjoner. Forhåpentligvis er dette en kjapp titt for noen. 

Renamer app.js til app.jsx, og der den blir imported.

Det var en del import annotasjoner som ikke ble med i commanden, så måtte gjøre de manuelt når feilene dukket opp ved kjøring.

Fikk GPT til å generere et script som vil finne alle filer som er js, som trenger å være/kan være jsx, og konvertere de. Den sjekker basically om det er jsx syntax i filene på en fancy måte, gikk gjennom scriptet, og ettersom hva jeg kan se, og med min forståelse av prosjektet, ser det ut som den gjorde det riktig. 

[yrjanaff]

Første jeg legger merke til er at .nvmrc-fila bruker en veldig gammel node-versjon (v12.13.1). Jeg får automatisk satt den node-versjonen som er derfinert der og det gjør at jeg ikke får installert dependencies. Siste LTS versjon av Node er v24, så kanskje oppdatere fila til det? Tror det går greit å bare sette v24 i fila, så låser man seg kun til major-versjon.

[bjoost94]

Første jeg legger merke til er at .nvmrc-fila bruker en veldig gammel node-versjon (v12.13.1). Jeg får automatisk satt den node-versjonen som er derfinert der og det gjør at jeg ikke får installert dependencies. Siste LTS versjon av Node er v24, så kanskje oppdatere fila til det? Tror det går greit å bare sette v24 i fila, så låser man seg kun til major-versjon.

Den er god!
Hadde bare fått gjort grovarbeidet for å migrere til vite sålangt, noen versjoner henger nokk fortsatt litt igjen.

Skal gå over endringene som ble gjort en gang til idag, og deretter begynne med å oppgradere packages.

[yrjanaff]

Det virker som at Vite ikke støtter denne typen referanser i html. Ser i konsollen i nettleser at dette skrives ut som VITE_ENVIRONMENT: %VITE_ENVIRONMENT%

[bjoost94]

Klassisk "Funker på min pc" situasjon, for jeg får VITE_ENVIRONMENT: dev 😅

[bjoost94]

Men etter litt research, ser det ut som at måten det er gjort på er feil uansett, gammel CRA mønster. Oppdaterer dette.

[yrjanaff]

Dette ser ut som en veldig bra start! 🚀

Jeg har noen kommentarer annet en den ene jeg la til i koden:

• Det ser ut som at det fortsatt er noen referanser til process.env i serviceWorker.js
• Testene feiler. Står noe om at ReadbleStream is not defined. Mulig man må endre test-bibliotek eller config for testene?
• Som det neves i beskrvelsen så er det fortsatt en god del deprecation-warnings når man kjører opp appen. Ser også i konsollen i nettleseren at det kommer en del av disse warningene:

  Warning: MetadataSearchResult: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
  MetadataSearchResult@http://localhost:5173/src/components/partials/SearchResults/MetadataSearchResult.jsx:19:20
  

[bjoost94]

Dette ser ut som en veldig bra start! 🚀

Jeg har noen kommentarer annet en den ene jeg la til i koden:

• Det ser ut som at det fortsatt er noen referanser til process.env i serviceWorker.js
• Testene feiler. Står noe om at ReadbleStream is not defined. Mulig man må endre test-bibliotek eller config for testene?
• Som det neves i beskrvelsen så er det fortsatt en god del deprecation-warnings når man kjører opp appen. Ser også i konsollen i nettleseren at det kommer en del av disse warningene:

  Warning: MetadataSearchResult: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
  MetadataSearchResult@http://localhost:5173/src/components/partials/SearchResults/MetadataSearchResult.jsx:19:20
  

Supert, takk for sjekken! Skal se på de tingene du har nevnt, som sagt går jeg gjennom alt som ble gjort en gang til, sjekker tingene fra tilbakemeldingene, også begynner jeg å se på pakker.