LF-5206: Upgrade to Vite v5

packages/webapp/package.json

@@ -155,11 +155,11 @@
     "sass": "^1.56.1",
     "storybook": "^8.2.8",
     "typescript": "^5.7.3",
-    "vite": "^4.5.5",
-    "vite-plugin-istanbul": "^4.0.0",
-    "vite-plugin-pwa": "^0.14.3",
-    "vite-plugin-svgr": "^2.4.0",
-    "vitest": "^0.34.5"
+    "vite": "^5.4.11",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^1.6.0"
   },
   "pnpm": {
     "overrides": {

packages/webapp/src/components/AddSensors/Partners.tsx

@@ -22,7 +22,7 @@ import Input, { getInputErrors } from '../Form/Input';
 import InputBaseLabel from '../Form/InputBase/InputBaseLabel';
 import { Main } from '../Typography';
 import { PARTNERS } from '../../containers/AddSensors/constants';
-import { ReactComponent as ExternalLinkIcon } from '../../assets/images/icon_external_link.svg';
+import ExternalLinkIcon from '../../assets/images/icon_external_link.svg?react';
 import { AddSensorsFormFields, FarmAddonField, PARTNER } from '../../containers/AddSensors/types';
 import styles from './styles.module.scss';
 import { AddonPartner } from '../../types';

packages/webapp/src/components/Animals/AddAnimalsSummaryCard/index.tsx

@@ -16,8 +16,8 @@
 import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import { Title, Main } from '../../Typography';
-import { ReactComponent as RelaxedFarmer } from '../../../assets/images/animals/relaxed-farmer.svg';
-import { ReactComponent as ChevronRight } from '../../../assets/images/buttons/chevron-right.svg';
+import RelaxedFarmer from '../../../assets/images/animals/relaxed-farmer.svg?react';
+import ChevronRight from '../../../assets/images/buttons/chevron-right.svg?react';
 import Button from '../../Form/Button';
 import { IconSummary } from './IconSummary';
 import { AnimalSummary, BatchSummary } from './types';

packages/webapp/src/components/Animals/RemoveAnimalsModal/index.tsx

@@ -21,8 +21,8 @@ import { Controller, useForm, SubmitHandler } from 'react-hook-form';
 import { useTheme, useMediaQuery } from '@mui/material';
 import clsx from 'clsx';
 import Input, { getInputErrors } from '../../Form/Input';
-import { ReactComponent as WarningIcon } from '../../../assets/images/warning.svg';
-import { ReactComponent as CheckIcon } from '../../../assets/images/check-circle.svg';
+import WarningIcon from '../../../assets/images/warning.svg?react';
+import CheckIcon from '../../../assets/images/check-circle.svg?react';
 import { useTranslation } from 'react-i18next';
 import { getLocalDateInYYYYDDMM } from '../../../util/date';
 import { useGetAnimalRemovalReasonsQuery } from '../../../store/api/apiSlice';

packages/webapp/src/components/Button/ClearFiltersButton/index.tsx

@@ -15,7 +15,7 @@
 
 import { useTranslation } from 'react-i18next';
 import TextButton from '../../Form/Button/TextButton';
-import { ReactComponent as ClearFilterIcon } from '../../../assets/images/clear-filters.svg';
+import ClearFilterIcon from '../../../assets/images/clear-filters.svg?react';
 import styles from './styles.module.scss';
 
 export enum ClearFiltersButtonType {

packages/webapp/src/components/Card/NewReleaseCard/NewReleaseCard.jsx

@@ -1,5 +1,5 @@
 import Card from '../index';
-import { ReactComponent as Star } from '../../../assets/images/signUp/new_feature.svg';
+import Star from '../../../assets/images/signUp/new_feature.svg?react';
 import { Semibold, Text } from '../../Typography';
 import typography from '../../Typography/typography.module.scss';
 import styles from './styles.module.scss';

packages/webapp/src/components/Card/NotificationCard/NotificationCard.jsx

@@ -4,7 +4,7 @@ import cardStyles from '../card.module.scss';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { ReactComponent as AlertIcon } from '../../../assets/images/alert.svg';
+import AlertIcon from '../../../assets/images/alert.svg?react';
 import getTaskTypeIcon from '../../util/getTaskTypeIcon';
 import getNotificationTypeIcon from '../../util/getNotificationTypeIcon';
 import { getLanguageFromLocalStorage } from '../../../util/getLanguageFromLocalStorage';

packages/webapp/src/components/CardWithStatus/ManagementPlanCard/ManagementPlanCard.jsx

@@ -1,6 +1,6 @@
 import { CardWithStatus } from '../index';
 import styles from './styles.module.scss';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/Calendar.svg';
+import CalendarIcon from '../../../assets/images/task/Calendar.svg?react';
 import clsx from 'clsx';
 import React from 'react';
 import { getManagementPlanCardDate } from '../../../util/moment';

packages/webapp/src/components/CardWithStatus/StatusLabel/index.tsx

@@ -16,7 +16,7 @@
 import { makeStyles } from '@mui/styles';
 import { colors } from '../../../assets/theme';
 import { Link } from 'react-router-dom';
-import { ReactComponent as ExternalLinkIcon } from '../../../assets/images/icon_external_link.svg';
+import ExternalLinkIcon from '../../../assets/images/icon_external_link.svg?react';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
 import { HTMLAttributes } from 'react';

packages/webapp/src/components/CardWithStatus/TaskCard/TaskCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/Calendar.svg';
-import { ReactComponent as UnassignedIcon } from '../../../assets/images/task/Unassigned.svg';
+import CalendarIcon from '../../../assets/images/task/Calendar.svg?react';
+import UnassignedIcon from '../../../assets/images/task/Unassigned.svg?react';
 import styles from './styles.module.scss';
 
 import getTaskTypeIcon from '../../util/getTaskTypeIcon';

packages/webapp/src/components/CertificationSurvey/RegisteredCertifierNoQuestions/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Main, Semibold } from '../../Typography';
 import { colors } from '../../../assets/theme';
-import { ReactComponent as PostSurveySplash } from '../../../assets/images/certification/CompleteSurveySplash.svg';
+import PostSurveySplash from '../../../assets/images/certification/CompleteSurveySplash.svg?react';
 
 const RegisteredCertifierNoQuestionsSurvey = ({ email }) => {
   const { t } = useTranslation();

packages/webapp/src/components/CertificationSurvey/RegisteredCertifierQuestions/index.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Info, Main, Semibold } from '../../Typography';
 import { colors } from '../../../assets/theme';
-import { ReactComponent as PostSurveySplash } from '../../../assets/images/certification/CompleteSurveySplash.svg';
+import PostSurveySplash from '../../../assets/images/certification/CompleteSurveySplash.svg?react';
 const surveyGroupId = import.meta.env.VITE_SURVEY_GROUP_ID;
 
 const RegisteredCertifierQuestionsSurvey = ({

packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/index.jsx

@@ -3,7 +3,7 @@ import styles from './chooseFarmMenuItem.module.scss';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Card from '../../../Card';
-import { ReactComponent as EmailIcon } from '../../../../assets/images/chooseFarm/emailIcon.svg';
+import EmailIcon from '../../../../assets/images/chooseFarm/emailIcon.svg?react';
 
 const ChooseFarmMenuItem = ({
   color = 'secondary',

packages/webapp/src/components/Crop/CropHeader.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Label, Text, Title } from '../Typography';
-import { ReactComponent as Back } from '../../assets/images/managementPlans/back.svg';
+import Back from '../../assets/images/managementPlans/back.svg?react';
 import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import clsx from 'clsx';

packages/webapp/src/components/Crop/Detail.jsx

@@ -3,7 +3,7 @@ import RouterTab from '../RouterTab';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '../Form/Button';
-import { ReactComponent as Leaf } from '../../assets/images/signUp/leaf.svg';
+import Leaf from '../../assets/images/signUp/leaf.svg?react';
 import { Main, Title } from '../Typography';
 import { useForm } from 'react-hook-form';
 import RadioGroup from '../Form/RadioGroup';

packages/webapp/src/components/Crop/ManagementDetail/ManagementPlanTasks.jsx

@@ -11,7 +11,7 @@ import IncompleteTaskModal from '../../Modals/IncompleteTaskModal';
 import RouterTab from '../../RouterTab';
 import DeleteBox from '../../Task/TaskReadOnly/DeleteBox';
 import { FiAlertTriangle } from 'react-icons/fi';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 import navStyles from '@navStyles';

packages/webapp/src/components/Crop/PlantingLocation/index.jsx

@@ -6,8 +6,8 @@ import LocationPicker from '../../LocationPicker/SingleLocationPicker';
 import { useTranslation } from 'react-i18next';
 import Layout from '../../Layout';
 import MultiStepPageTitle from '../../PageTitle/MultiStepPageTitle';
-import { ReactComponent as Cross } from '../../../assets/images/map/cross.svg';
-import { ReactComponent as LocationPin } from '../../../assets/images/map/location.svg';
+import Cross from '../../../assets/images/map/cross.svg?react';
+import LocationPin from '../../../assets/images/map/location.svg?react';
 import Checkbox from '../../Form/Checkbox';
 import { useForm } from 'react-hook-form';
 import { cloneObject } from '../../../util';

packages/webapp/src/components/Crop/PlantingMethod/PurePlantingMethod.jsx

@@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next';
 import { Main } from '../../Typography';
 import RadioGroup from '../../Form/RadioGroup';
 import styles from './styles.module.scss';
-import { ReactComponent as Individual } from '../../../assets/images/plantingMethod/Individual.svg';
-import { ReactComponent as Rows } from '../../../assets/images/plantingMethod/Rows.svg';
+import Individual from '../../../assets/images/plantingMethod/Individual.svg?react';
+import Rows from '../../../assets/images/plantingMethod/Rows.svg?react';
 
-import { ReactComponent as Beds } from '../../../assets/images/plantingMethod/Beds.svg';
-import { ReactComponent as Monocrop } from '../../../assets/images/plantingMethod/Monocrop.svg';
+import Beds from '../../../assets/images/plantingMethod/Beds.svg?react';
+import Monocrop from '../../../assets/images/plantingMethod/Monocrop.svg?react';
 import { DO_CDN_URL } from '../../../util/constants';
 import ImageModal from '../../Modals/ImageModal';
 

packages/webapp/src/components/CropTile/ManagementPlanTile/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '../styles.module.scss';
 import clsx from 'clsx';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/managementPlans/calendar.svg';
+import CalendarIcon from '../../../assets/images/managementPlans/calendar.svg?react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import PureCropTile from '../index';
@@ -15,7 +15,7 @@ const cropStatus = {
 };
 
 const isActive = (status) => status === cropStatus.active;
-const isPast = (status) => (status === cropStatus.completed) || (status === cropStatus.abandoned);
+const isPast = (status) => status === cropStatus.completed || status === cropStatus.abandoned;
 const isPlanned = (status) => status === cropStatus.planned;
 
 export default function PureManagementPlanTile({
@@ -28,12 +28,8 @@ export default function PureManagementPlanTile({
   date,
 }) {
   const { t } = useTranslation();
-  const {
-    crop_variety_name,
-    crop_translation_key,
-    crop_variety_photo_url,
-    start_date,
-  } = managementPlan;
+  const { crop_variety_name, crop_translation_key, crop_variety_photo_url, start_date } =
+    managementPlan;
   const displayDate = date || start_date;
 
   const notes =

packages/webapp/src/components/CustomSignUp/index.jsx

@@ -1,6 +1,6 @@
 import styles from './styles.module.scss';
-import { ReactComponent as Logo } from '../../assets/images/signUp/logo.svg';
-import { ReactComponent as LineBreak } from '../../assets/images/signUp/lineBreak.svg';
+import Logo from '../../assets/images/signUp/logo.svg?react';
+import LineBreak from '../../assets/images/signUp/lineBreak.svg?react';
 import Button from '../Form/Button';
 import Input from '../Form/Input';
 import React from 'react';

packages/webapp/src/components/DateRangeSelector/DateRangeInput.jsx

@@ -17,7 +17,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as Calendar } from '../../assets/images/dateInput/calendar.svg';
+import Calendar from '../../assets/images/dateInput/calendar.svg?react';
 import { FROM_DATE, TO_DATE } from '../Form/DateRangePicker';
 import ReactSelect from '../Form/ReactSelect';
 import CustomDateRangeSelector from './CustomDateRangeSelector';

packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/index.tsx

@@ -19,13 +19,13 @@ import { useMediaQuery } from '@mui/material';
 import styles from './styles.module.scss';
 import { Title, Main } from '../../Typography';
 import TextButton from '../../Form/Button/TextButton';
-import { ReactComponent as Background } from '../../../assets/images/errorFallback/background.svg';
-import { ReactComponent as MobileBackground } from '../../../assets/images/errorFallback/background_mobile.svg';
-import { ReactComponent as FarmerDesktop } from '../../../assets/images/errorFallback/farmer_desktop.svg';
-import { ReactComponent as FarmerMobile } from '../../../assets/images/errorFallback/farmer_mobile.svg';
-import { ReactComponent as RefreshIcon } from '../../../assets/images/errorFallback/refresh.svg';
-import { ReactComponent as LogoutIcon } from '../../../assets/images/errorFallback/logout.svg';
-import { ReactComponent as Logo } from '../../../assets/images/nav/logo-large.svg';
+import Background from '../../../assets/images/errorFallback/background.svg?react';
+import MobileBackground from '../../../assets/images/errorFallback/background_mobile.svg?react';
+import FarmerDesktop from '../../../assets/images/errorFallback/farmer_desktop.svg?react';
+import FarmerMobile from '../../../assets/images/errorFallback/farmer_mobile.svg?react';
+import RefreshIcon from '../../../assets/images/errorFallback/refresh.svg?react';
+import LogoutIcon from '../../../assets/images/errorFallback/logout.svg?react';
+import Logo from '../../../assets/images/nav/logo-large.svg?react';
 import { SUPPORT_EMAIL } from '../../../util/constants';
 
 interface PureReactErrorFallbackProps {

packages/webapp/src/components/Expandable/InlineRemove.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import TextButton from '../Form/Button/TextButton';
 import { IconLink, Main } from '../Typography';
 import Icon from '../Icons';
-import { ReactComponent as TrashIcon } from '../../assets/images/animals/trash_icon_new.svg';
+import TrashIcon from '../../assets/images/animals/trash_icon_new.svg?react';
 import styles from './styles.module.scss';
 
 export interface InlineWarningProps {

packages/webapp/src/components/Expandable/MainContent.tsx

@@ -17,8 +17,8 @@ import { ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCheck } from 'react-icons/fa';
 import { InlineWarning as InlineRemoveWarning, RemoveLink } from './InlineRemove';
-import { ReactComponent as CircledCheckIcon } from '../../assets/images/check-circle.svg';
-import { ReactComponent as WarningIcon } from '../../assets/images/warning.svg';
+import CircledCheckIcon from '../../assets/images/check-circle.svg?react';
+import WarningIcon from '../../assets/images/warning.svg?react';
 import styles from './styles.module.scss';
 
 export enum IconType {

packages/webapp/src/components/ExpiredTokenScreen/index.jsx

@@ -1,5 +1,5 @@
 import Layout from '../Layout';
-import { ReactComponent } from '../../assets/images/expiredToken/expiredToken.svg';
+import ReactComponent from '../../assets/images/expiredToken/expiredToken.svg?react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';

packages/webapp/src/components/FarmNotes/FarmNoteForm/index.tsx

@@ -24,7 +24,7 @@ import ImageUploadCapture from '../../ImageUploadCapture';
 import { getInputErrors } from '../../Form/Input';
 import { Error } from '../../Typography';
 import { hookFormMaxCharsValidation } from '../../Form/hookformValidationUtils';
-import { ReactComponent as LockIcon } from '../../../assets/images/icon-privacy.svg';
+import LockIcon from '../../../assets/images/icon-privacy.svg?react';
 import styles from './styles.module.scss';
 
 export const FARM_NOTE_FIELDS = {

packages/webapp/src/components/FarmNotes/FarmNoteItem/index.tsx

@@ -18,11 +18,11 @@ import { useTranslation } from 'react-i18next';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import SearchIcon from '@mui/icons-material/Search';
-import { ReactComponent as CalendarIcon } from '../../../assets/images/task/Calendar.svg';
-import { ReactComponent as EditIcon } from '../../../assets/images/edit-02.svg';
-import { ReactComponent as TrashIcon } from '../../../assets/images/trash-03.svg';
-import { ReactComponent as LockIcon } from '../../../assets/images/icon-privacy.svg';
-import { ReactComponent as PhotoIcon } from '../../../assets/images/imageCapture/photo-btn.svg';
+import CalendarIcon from '../../../assets/images/task/Calendar.svg?react';
+import EditIcon from '../../../assets/images/edit-02.svg?react';
+import TrashIcon from '../../../assets/images/trash-03.svg?react';
+import LockIcon from '../../../assets/images/icon-privacy.svg?react';
+import PhotoIcon from '../../../assets/images/imageCapture/photo-btn.svg?react';
 import TextButton from '../../Form/Button/TextButton';
 import Button from '../../Form/Button';
 import useMediaWithAuthentication from '../../../containers/hooks/useMediaWithAuthentication';

packages/webapp/src/components/FarmNotes/FarmNoteList/index.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next';
 import useExpandable from '../../Expandable/useExpandableItem';
 import FarmNoteItem from '../FarmNoteItem';
 import Button from '../../Form/Button';
-import { ReactComponent as PlusCircleIcon } from '../../../assets/images/plus-circle.svg';
+import PlusCircleIcon from '../../../assets/images/plus-circle.svg?react';
 import { FarmNote } from '../../../store/api/types';
 import styles from './styles.module.scss';
 

packages/webapp/src/components/FarmNotes/FarmNotesFloatingButton/index.tsx

@@ -14,7 +14,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as MessageTextSquareIcon } from '../../../assets/images/message-text-square-02.svg';
+import MessageTextSquareIcon from '../../../assets/images/message-text-square-02.svg?react';
 import styles from './styles.module.scss';
 
 interface FarmNotesFloatingButtonProps {

packages/webapp/src/components/FarmSwitchOutro/index.jsx

@@ -1,5 +1,5 @@
 import styles from './styles.module.scss';
-import { ReactComponent as OutroImg } from '../../assets/images/farm-switch-outro/outro.svg';
+import OutroImg from '../../assets/images/farm-switch-outro/outro.svg?react';
 import Button from '../Form/Button';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

packages/webapp/src/components/FilePicker/index.tsx

@@ -15,7 +15,7 @@
 
 import styles from './styles.module.scss';
 import { ContainerWithIcon } from '../ContainerWithIcon/ContainerWithIcon';
-import { ReactComponent as TrashIcon } from '../../assets/images/document/trash.svg';
+import TrashIcon from '../../assets/images/document/trash.svg?react';
 import { FilePickerFunctions } from './useFilePickerUpload';
 import { mediaEnum } from '../../containers/MediaWithAuthentication/constants';
 import CertifierSelectionMenuItem from '../OrganicCertifierSurvey/CertifierSelection/CertifierSelectionMenu/CertiferSelectionMenuItem';

packages/webapp/src/components/Finances/AddExpense/ExpenseItemInputs.jsx

@@ -16,7 +16,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { IconLink } from '../../Typography';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import Input from '../../Form/Input';
 import { DATE, NOTE, VALUE } from './constants';
 import styles from './styles.module.scss';

packages/webapp/src/components/Finances/FinanceGroup/GroupItem/index.jsx

@@ -4,7 +4,7 @@ import styles from '../styles.module.scss';
 import clsx from 'clsx';
 import { BsChevronRight } from 'react-icons/bs';
 import { Text } from '../../../Typography';
-import { ReactComponent as CalendarIcon } from '../../../../assets/images/managementPlans/calendar.svg';
+import CalendarIcon from '../../../../assets/images/managementPlans/calendar.svg?react';
 import grabCurrencySymbol from '../../../../util/grabCurrencySymbol';
 
 const FinanceItem = ({ title, subtitle, amount, isPlan, onClickForward }) => {

packages/webapp/src/components/Finances/PureExpenseDetail/index.jsx

@@ -23,7 +23,7 @@ import Button from '../../Form/Button';
 import PropTypes from 'prop-types';
 import { IconLink } from '../../Typography';
 import DeleteBox from '../../Task/TaskReadOnly/DeleteBox';
-import { ReactComponent as TrashIcon } from '../../../assets/images/document/trash.svg';
+import TrashIcon from '../../../assets/images/document/trash.svg?react';
 import { hookFormMaxCharsValidation } from '../../Form/hookformValidationUtils';
 import { useCurrencySymbol } from '../../../containers/hooks/useCurrencySymbol';
 import ReactSelect from '../../Form/ReactSelect';