frontend/print/pdf: switch from lodash to lodash-es

Print had a problem loading lodash. Because we use lodash in common, i switched all modules. This fixes the dev mode of print. cjs lodash is still used transitively by some dev packages, but that's ok.
ecamp · Jan 26, 2025 · 155a8dc · 155a8dc
1 parent ff4cd03
commit 155a8dc
Show file tree

Hide file tree

Showing 83 changed files with 104 additions and 94 deletions.
diff --git a/common/helpers/dayjs/__tests__/parseTime.spec.js b/common/helpers/dayjs/__tests__/parseTime.spec.js
@@ -1,7 +1,7 @@
 import { describe, beforeEach, expect, it } from 'vitest'
 import { default as dayjs, dayjsLocaleMap } from '../../dayjs'
 import parseTime from '../parseTime'
-import { padStart, range } from 'lodash'
+import { padStart, range } from 'lodash-es'
 import { HTML5_FMT } from '../../dateFormat'
 
 describe('parseTime', () => {

diff --git a/common/helpers/materialListsSorted.js b/common/helpers/materialListsSorted.js
@@ -1,4 +1,4 @@
-import sortBy from 'lodash/sortBy.js'
+import sortBy from 'lodash-es/sortBy.js'
 
 export default function (materialLists) {
   return sortBy(

diff --git a/common/helpers/picasso.js b/common/helpers/picasso.js
@@ -1,7 +1,7 @@
-import minBy from 'lodash/minBy.js'
-import maxBy from 'lodash/maxBy.js'
-import sortBy from 'lodash/sortBy.js'
-import keyBy from 'lodash/keyBy.js'
+import minBy from 'lodash-es/minBy.js'
+import maxBy from 'lodash-es/maxBy.js'
+import sortBy from 'lodash-es/sortBy.js'
+import keyBy from 'lodash-es/keyBy.js'
 import dayjs from './dayjs.js'
 import { arrange } from './scheduleEntryLayout.js'
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -64,7 +64,7 @@
     "inter-ui": "3.19.3",
     "js-cookie": "3.0.5",
     "linkify-it": "5.0.0",
-    "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
     "runes": "0.4.3",
     "slugify": "1.6.6",
     "url-template": "3.1.1",

diff --git a/frontend/src/components/activity/ActivityResponsibles.vue b/frontend/src/components/activity/ActivityResponsibles.vue
@@ -32,7 +32,7 @@
 <script>
 import { serverErrorToString } from '@/helpers/serverError.js'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
-import { isEqual, sortBy } from 'lodash'
+import { isEqual, sortBy } from 'lodash-es'
 import UserAvatar from '@/components/user/UserAvatar.vue'
 
 export default {

diff --git a/frontend/src/components/activity/ButtonNestedContentNodeAdd.vue b/frontend/src/components/activity/ButtonNestedContentNodeAdd.vue
@@ -58,7 +58,7 @@
   </v-row>
 </template>
 <script>
-import { camelCase } from 'lodash'
+import { camelCase } from 'lodash-es'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import { getEnv } from '@/environment.js'
 

diff --git a/frontend/src/components/activity/DaySwitcher.vue b/frontend/src/components/activity/DaySwitcher.vue
@@ -76,7 +76,7 @@
 </template>
 <script>
 import AvatarRow from '@/components/generic/AvatarRow.vue'
-import { reduce, sortBy } from 'lodash'
+import { reduce, sortBy } from 'lodash-es'
 
 export default {
   name: 'DaySwitcher',

diff --git a/frontend/src/components/activity/MenuCardlessContentNode.vue b/frontend/src/components/activity/MenuCardlessContentNode.vue
@@ -30,7 +30,7 @@
 <script>
 import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
-import camelCase from 'lodash/camelCase.js'
+import camelCase from 'lodash-es/camelCase.js'
 
 export default {
   name: 'MenuCardlessContentNode',

diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
@@ -247,7 +247,7 @@ Displays a single scheduleEntry
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import ApiTextField from '@/components/form/api/ApiTextField.vue'
 import RootNode from '@/components/activity/RootNode.vue'

diff --git a/frontend/src/components/activity/content/Checklist.vue b/frontend/src/components/activity/content/Checklist.vue
@@ -82,7 +82,7 @@ import DetailPane from '@/components/generic/DetailPane.vue'
 import ChecklistItem from './checklist/ChecklistItem.vue'
 import ChecklistItems from './checklist/ChecklistItems.vue'
 import { serverErrorToString } from '@/helpers/serverError.js'
-import { debounce, isEqual, sortBy, uniq } from 'lodash'
+import { debounce, isEqual, sortBy, uniq } from 'lodash-es'
 import { computed } from 'vue'
 
 export default {

diff --git a/frontend/src/components/activity/content/ColumnLayout.vue b/frontend/src/components/activity/content/ColumnLayout.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { keyBy, mapValues } from 'lodash'
+import { keyBy, mapValues } from 'lodash-es'
 import { contentNodeMixin } from '@/mixins/contentNodeMixin.js'
 import ResizableColumn from '@/components/activity/content/columnLayout/ResizableColumn.vue'
 import DraggableContentNodes from '@/components/activity/DraggableContentNodes.vue'
@@ -66,7 +66,7 @@ import { idToColor } from '@/common/helpers/colors.js'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import MenuCardlessContentNode from '@/components/activity/MenuCardlessContentNode.vue'
 import LayoutNodeCard from '@/components/activity/content/layout/LayoutNodeCard.vue'
-import camelCase from 'lodash/camelCase.js'
+import camelCase from 'lodash-es/camelCase.js'
 
 function cumulativeSumReducer(cumSum, nextElement) {
   cumSum.push(cumSum[cumSum.length - 1] + nextElement)

diff --git a/frontend/src/components/activity/content/LAThematicArea.vue b/frontend/src/components/activity/content/LAThematicArea.vue
@@ -74,7 +74,7 @@
 <script>
 import ContentNodeCard from '@/components/activity/content/layout/ContentNodeCard.vue'
 import { contentNodeMixin } from '@/mixins/contentNodeMixin.js'
-import { debounce, isEqual, sortBy } from 'lodash'
+import { debounce, isEqual, sortBy } from 'lodash-es'
 import { serverErrorToString } from '@/helpers/serverError.js'
 
 export default {

diff --git a/frontend/src/components/activity/content/ResponsiveLayout.vue b/frontend/src/components/activity/content/ResponsiveLayout.vue
@@ -87,7 +87,7 @@ import { contentNodeMixin } from '@/mixins/contentNodeMixin.js'
 import DraggableContentNodes from '@/components/activity/DraggableContentNodes.vue'
 import MenuCardlessContentNode from '@/components/activity/MenuCardlessContentNode.vue'
 import LayoutNodeCard from '@/components/activity/content/layout/LayoutNodeCard.vue'
-import { groupBy } from 'lodash'
+import { groupBy } from 'lodash-es'
 
 const ASIDE_CONTENT_WIDTH = 250
 const MAIN_CONTENT_WIDTH = 600

diff --git a/frontend/src/components/activity/content/checklist/ChecklistItem.vue b/frontend/src/components/activity/content/checklist/ChecklistItem.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { filter, sortBy } from 'lodash'
+import { filter, sortBy } from 'lodash-es'
 
 export default {
   name: 'ChecklistItem',

diff --git a/frontend/src/components/activity/content/columnLayout/ColumnOperations.vue b/frontend/src/components/activity/content/columnLayout/ColumnOperations.vue
@@ -21,7 +21,7 @@
   </div>
 </template>
 <script>
-import { cloneDeep, groupBy } from 'lodash'
+import { cloneDeep, groupBy } from 'lodash-es'
 import {
   calculateNextSlotName,
   adjustColumnWidths,

diff --git a/frontend/src/components/activity/content/columnLayout/calculateNextSlotName.js b/frontend/src/components/activity/content/columnLayout/calculateNextSlotName.js
@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep'
+import cloneDeep from 'lodash-es/cloneDeep'
 
 export function calculateNextSlotName(slotNames) {
   let i = 0

diff --git a/frontend/src/components/activity/content/layout/ContentNodeCard.vue b/frontend/src/components/activity/content/layout/ContentNodeCard.vue
@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import camelCase from 'lodash/camelCase'
+import camelCase from 'lodash-es/camelCase'
 import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
 import IconWithTooltip from '@/components/generic/IconWithTooltip.vue'
 import ApiForm from '@/components/form/api/ApiForm.vue'

diff --git a/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue b/frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
@@ -41,7 +41,7 @@
 
 <script>
 import draggable from 'vuedraggable'
-import { isEqual } from 'lodash'
+import { isEqual } from 'lodash-es'
 import StoryboardRowDense from './StoryboardRowDense.vue'
 import StoryboardRowDefault from './StoryboardRowDefault.vue'
 

diff --git a/frontend/src/components/campAdmin/CampActivityProgressLabels.vue b/frontend/src/components/campAdmin/CampActivityProgressLabels.vue
@@ -102,7 +102,7 @@
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
 import ContentGroup from '@/components/layout/ContentGroup.vue'
 import DialogActivityProgressLabelCreate from './DialogActivityProgressLabelCreate.vue'
 import DialogActivityProgressLabelEdit from '@/components/campAdmin/DialogActivityProgressLabelEdit.vue'

diff --git a/frontend/src/components/campAdmin/CampPeriods.vue b/frontend/src/components/campAdmin/CampPeriods.vue
@@ -36,7 +36,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
 import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 import PeriodItem from './CampPeriodsListItem.vue'
 import DialogPeriodCreate from './DialogPeriodCreate.vue'

diff --git a/frontend/src/components/campCreate/CampCreate.vue b/frontend/src/components/campCreate/CampCreate.vue
@@ -31,7 +31,7 @@
   </v-stepper>
 </template>
 <script>
-import { camelCase } from 'lodash'
+import { camelCase } from 'lodash-es'
 import { campRoute } from '@/router.js'
 import CampCreateStep1 from '@/components/campCreate/CampCreateStep1.vue'
 import CampCreateStep2 from '@/components/campCreate/CampCreateStep2.vue'

diff --git a/frontend/src/components/campCreate/CampCreateStep2.vue b/frontend/src/components/campCreate/CampCreateStep2.vue
@@ -113,7 +113,7 @@
   </v-stepper-content>
 </template>
 <script>
-import camelCase from 'lodash/camelCase.js'
+import camelCase from 'lodash-es/camelCase.js'
 import { ValidationObserver } from 'vee-validate'
 import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 import ButtonCancel from '@/components/buttons/ButtonCancel.vue'

diff --git a/frontend/src/components/checklist/ChecklistItemEdit.vue b/frontend/src/components/checklist/ChecklistItemEdit.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
 import DetailPane from '@/components/generic/DetailPane.vue'
 import DialogBase from '@/components/dialog/DialogBase.vue'
 import PromptEntityDelete from '@/components/prompt/PromptEntityDelete.vue'

diff --git a/frontend/src/components/checklist/ChecklistItemParent.vue b/frontend/src/components/checklist/ChecklistItemParent.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
 import ScheduleEntryLinks from '../material/ScheduleEntryLinks.vue'
 
 export default {

diff --git a/frontend/src/components/checklist/SortableChecklist.vue b/frontend/src/components/checklist/SortableChecklist.vue
@@ -54,7 +54,7 @@
 <script>
 import { computed } from 'vue'
 import draggable from 'vuedraggable'
-import { every, sortBy, filter } from 'lodash'
+import { every, sortBy, filter } from 'lodash-es'
 import { errorToMultiLineToast } from '@/components/toast/toasts.js'
 import SortableChecklistItem from '@/components/checklist/SortableChecklistItem.vue'
 import ChecklistItemCreate from '@/components/checklist/ChecklistItemCreate.vue'

diff --git a/frontend/src/components/collaborator/CollaboratorList.vue b/frontend/src/components/collaborator/CollaboratorList.vue
@@ -19,7 +19,7 @@
 <script>
 import CollaboratorEdit from '@/components/collaborator/CollaboratorEdit.vue'
 import CollaboratorListItem from '@/components/collaborator/CollaboratorListItem.vue'
-import { sortBy } from 'lodash'
+import { sortBy } from 'lodash-es'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 
 const ROLE_ORDER = ['manager', 'member', 'guest']

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { get, keyBy } from 'lodash'
+import { get, keyBy } from 'lodash-es'
 
 export default {
   name: 'SelectFilter',

diff --git a/frontend/src/components/form/api/ApiSortable.vue b/frontend/src/components/form/api/ApiSortable.vue
@@ -25,7 +25,7 @@
 
 <script>
 import draggable from 'vuedraggable'
-import { every, sortBy } from 'lodash'
+import { every, sortBy } from 'lodash-es'
 import { errorToMultiLineToast } from '@/components/toast/toasts.js'
 export default {
   name: 'ApiSortable',

diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
@@ -29,7 +29,7 @@ Wrapper component for form components to save data back to API
 </template>
 
 <script>
-import { debounce, set, get } from 'lodash'
+import { debounce, set, get } from 'lodash-es'
 import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
 import { ValidationObserver } from 'vee-validate'
 import { serverErrorToString } from '@/helpers/serverError.js'

diff --git a/frontend/src/components/form/api/__tests__/ApiCheckbox.spec.js b/frontend/src/components/form/api/__tests__/ApiCheckbox.spec.js
@@ -5,7 +5,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import flushPromises from 'flush-promises'
 import formBaseComponents from '@/plugins/formBaseComponents'
-import merge from 'lodash/merge'
+import merge from 'lodash-es/merge'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { i18n } from '@/plugins'
 import { mount as mountComponent } from '@vue/test-utils'

diff --git a/frontend/src/components/form/api/__tests__/ApiNumberField.spec.js b/frontend/src/components/form/api/__tests__/ApiNumberField.spec.js
@@ -5,7 +5,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import flushPromises from 'flush-promises'
 import formBaseComponents from '@/plugins/formBaseComponents'
-import merge from 'lodash/merge'
+import merge from 'lodash-es/merge'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { i18n } from '@/plugins'
 import { mount as mountComponent } from '@vue/test-utils'

diff --git a/frontend/src/components/form/api/__tests__/ApiSelect.spec.js b/frontend/src/components/form/api/__tests__/ApiSelect.spec.js
@@ -10,7 +10,7 @@ import ApiSelect from '../ApiSelect.vue'
 import flushPromises from 'flush-promises'
 import ApiWrapper from '@/components/form/api/ApiWrapper.vue'
 import { i18n } from '@/plugins'
-import merge from 'lodash/merge'
+import merge from 'lodash-es/merge'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { waitForDebounce } from '@/test/util'
 

diff --git a/frontend/src/components/form/api/__tests__/ApiSwitch.spec.js b/frontend/src/components/form/api/__tests__/ApiSwitch.spec.js
@@ -5,7 +5,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import flushPromises from 'flush-promises'
 import formBaseComponents from '@/plugins/formBaseComponents'
-import merge from 'lodash/merge'
+import merge from 'lodash-es/merge'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { i18n } from '@/plugins'
 import { mount as mountComponent } from '@vue/test-utils'

diff --git a/frontend/src/components/form/api/__tests__/ApiTextField.spec.js b/frontend/src/components/form/api/__tests__/ApiTextField.spec.js
@@ -5,7 +5,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import flushPromises from 'flush-promises'
 import formBaseComponents from '@/plugins/formBaseComponents'
-import merge from 'lodash/merge'
+import merge from 'lodash-es/merge'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { i18n } from '@/plugins'
 import { mount as mountComponent } from '@vue/test-utils'

diff --git a/frontend/src/components/form/api/__tests__/ApiTextarea.spec.js b/frontend/src/components/form/api/__tests__/ApiTextarea.spec.js
@@ -5,7 +5,7 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import flushPromises from 'flush-promises'
 import formBaseComponents from '@/plugins/formBaseComponents'
-import merge from 'lodash/merge'
+import merge from 'lodash-es/merge'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { i18n } from '@/plugins'
 import { mount as mountComponent } from '@vue/test-utils'

diff --git a/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js b/frontend/src/components/form/api/__tests__/ApiWrapper.spec.js
@@ -8,7 +8,7 @@ import ApiWrapper from '../ApiWrapper.vue'
 import { VBtn, VForm } from 'vuetify/lib'
 import { ValidationObserver } from 'vee-validate'
 
-const { cloneDeep } = await vi.importActual('lodash')
+const { cloneDeep } = await vi.importActual('lodash-es')
 
 Vue.use(Vuetify)
 Vue.use(veeValidatePlugin)
@@ -17,7 +17,7 @@ let vuetify
 let debounce
 const resolveDebounce = () => debounce()
 
-vi.mock('lodash', async (importOriginal) => {
+vi.mock('lodash-es', async (importOriginal) => {
   const lodash = await importOriginal()
   return {
     ...lodash,

diff --git a/frontend/src/components/form/base/BasePicker.vue b/frontend/src/components/form/base/BasePicker.vue
@@ -69,7 +69,7 @@ Displays a field as a picker (can be used with v-model)
 </template>
 
 <script>
-import { debounce } from 'lodash'
+import { debounce } from 'lodash-es'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 
 export default {

diff --git a/frontend/src/components/form/base/EColorPicker.vue b/frontend/src/components/form/base/EColorPicker.vue
@@ -103,7 +103,7 @@ Displays a field as a color picker (can be used with v-model)
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 import { contrastColor } from '@/common/helpers/colors.js'
 import ColorSwatch from '@/components/form/base/ColorPicker/ColorSwatch.vue'
-import { debounce } from 'lodash'
+import { debounce } from 'lodash-es'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 
 export default {

diff --git a/frontend/src/components/form/base/EParseField.vue b/frontend/src/components/form/base/EParseField.vue
@@ -47,7 +47,7 @@ Displays a field as a textfield (can be used with v-model)
 </template>
 
 <script>
-import { debounce } from 'lodash'
+import { debounce } from 'lodash-es'
 import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 import { ValidationProvider } from 'vee-validate'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'

diff --git a/frontend/src/components/print/PrintConfigurator.vue b/frontend/src/components/print/PrintConfigurator.vue
@@ -110,7 +110,7 @@ import PagesConfig from './configurator/PagesConfig.vue'
 import DownloadNuxtPdfButton from '@/components/print/print-nuxt/DownloadNuxtPdfButton.vue'
 import DownloadClientPdfButton from '@/components/print/print-client/DownloadClientPdfButton.vue'
 import { getEnv } from '@/environment.js'
-import cloneDeep from 'lodash/cloneDeep'
+import cloneDeep from 'lodash-es/cloneDeep'
 import VueI18n from '../../plugins/i18n/index.js'
 import repairConfig from './repairPrintConfig.js'
 import StoryConfig from '@/components/print/config/StoryConfig.vue'