Working setup for i18next + dayjs + vite

It's not perfect, but for the small files here, it's an acceptable
compromise.

Author: klimeryk

dayjs-locale

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && cp -r node_modules/dayjs/esm/locale dist/dayjs-locale",
+    "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -45,7 +45,6 @@
     "prettier": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vite-plugin-dynamic-import": "^1.5.0",
     "vite-plugin-i18next-loader": "^2.0.12"
   }
 }

package-lock.json

@@ -1,12 +1,12 @@
-import dayjs from 'dayjs';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import localeData from 'dayjs/plugin/localeData';
-import objectSupport from 'dayjs/plugin/objectSupport';
-import updateLocale from 'dayjs/plugin/updateLocale';
-import utc from 'dayjs/plugin/utc';
-import weekday from 'dayjs/plugin/weekday';
+import dayjs from 'dayjs/esm';
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat';
+import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
+import isoWeek from 'dayjs/esm/plugin/isoWeek';
+import localeData from 'dayjs/esm/plugin/localeData';
+import objectSupport from 'dayjs/esm/plugin/objectSupport';
+import updateLocale from 'dayjs/esm/plugin/updateLocale';
+import utc from 'dayjs/esm/plugin/utc';
+import weekday from 'dayjs/esm/plugin/weekday';
 
 dayjs.extend( advancedFormat );
 dayjs.extend( customParseFormat );

package.json

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 import dayjsLocales from 'dayjs/locale.json';
 
 export function i18nConfiguration( namespaces ) {
@@ -34,10 +34,12 @@ export function getPartiallySupportedLocales() {
 		.sort( ( languageA, languageB ) => languageA.name.localeCompare( languageB.name ) );
 }
 
+const DAYJS_LOCALES = import.meta.glob( '../../node_modules/dayjs/esm/locale/*.js', { eager: true } );
+
 export function handleLanguageChange( newLanguage, firstDayOfWeek = 1 ) {
-	// Silence the warning until https://github.com/vitejs/vite/issues/14102 is fixed
-	// Until then, we copy these files to /dist during build
-	import( /* @vite-ignore */ '../../dayjs-locale/' + newLanguage + '.js' );
+	// Hacky workaround until https://github.com/vitejs/vite/issues/14102 is fixed
+	const localeData = DAYJS_LOCALES[ `../../node_modules/dayjs/esm/locale/${newLanguage}.js` ];
+	dayjs.locale( newLanguage, localeData.default, false );
 	dayjs.locale( newLanguage );
 	dayjs.updateLocale( newLanguage, {
 		weekStart: firstDayOfWeek,

src/config/dayjs.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 import ICAL from 'ical.js';
 import PropTypes from 'prop-types';
 import React from 'react';

src/config/i18n.js

@@ -1,5 +1,5 @@
 import { arrayMove } from '@dnd-kit/sortable';
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 import { saveAs } from 'file-saver';
 import i18n, { changeLanguage } from 'i18next';
 import PropTypes from 'prop-types';

src/configuration-form/special-dates.jsx

@@ -1,7 +1,6 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import React, { Suspense } from 'react';
-import Spinner from 'react-bootstrap/Spinner';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { initReactI18next } from 'react-i18next';
 import resources from 'virtual:i18next-loader';
@@ -12,34 +11,21 @@ import '~/config/dayjs';
 import { handleLanguageChange, i18nConfiguration } from '~/config/i18n';
 import Loader from '~/loader';
 
+i18n.on( 'languageChanged', ( newLanguage ) => {
+	handleLanguageChange( newLanguage );
+} );
+
 i18n
 	.use( LanguageDetector )
 	.use( initReactI18next )
 	.init(
 		{ ...i18nConfiguration( [ 'app', 'pdf', 'config' ] ), resources },
 	);
 
-i18n.on( 'languageChanged', ( newLanguage ) => {
-	handleLanguageChange( newLanguage );
-} );
-
-const loadingComponent = (
-	<Spinner
-		className="position-absolute top-50 start-50"
-		animation="border"
-		variant="primary"
-		role="status"
-	>
-		<span className="visually-hidden">Loading...</span>
-	</Spinner>
-);
-
 const container = document.getElementById( 'root' );
 const root = createRoot( container );
 root.render(
 	<React.StrictMode>
-		<Suspense fallback={ loadingComponent }>
-			<Loader />
-		</Suspense>
+		<Loader />
 	</React.StrictMode>,
 );

src/configuration.jsx

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 
 import {
 	DATE_FORMAT as SPECIAL_DATES_DATE_FORMAT,

src/index.jsx

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 
 export function getWeekdays() {
 	const weekdaysFull = dayjs.weekdays();