From 94af5897578f9a5e079c34c2229f0250e19bd0df Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Mon, 21 Feb 2022 23:38:51 +0100
Subject: [PATCH] Fix jQuery and semantic ui

---
 front/src/components/audio/SearchBar.vue |  1 +
 front/src/components/playlists/Card.vue  |  5 +--
 front/src/main.js                        |  7 +++-
 front/src/semantic.js                    | 50 ++++++++++++------------
 4 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 71f89d78b..3d5b9966a 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -25,6 +25,7 @@ import jQuery from 'jquery'
 import router from '@/router'
 import lodash from 'lodash'
 import GlobalEvents from '@/components/utils/global-events.vue'
+console.log(jQuery)
 
 export default {
   components: {
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 009794856..7335e0d6e 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -56,6 +56,7 @@
 
 <script>
 import PlayButton from '@/components/audio/PlayButton.vue'
+import defaultCover from '@/assets/audio/default-cover.png'
 
 export default {
   components: {
@@ -69,9 +70,7 @@ export default {
         return self.$store.getters['instance/absoluteUrl'](url)
       }).slice(0, 4)
       while (urls.length < 4) {
-        urls.push(
-          require('../../assets/audio/default-cover.png')
-        )
+        urls.push(defaultCover)
       }
       return urls
     }
diff --git a/front/src/main.js b/front/src/main.js
index 8b48bf401..313950760 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -25,8 +25,11 @@ logger.default.debug('Environment variables:', import.meta.env)
 
 sync(store, router)
 
-window.$ = window.jQuery = require('jquery')
-require('./semantic.js')
+window.$ = window.jQuery = jQuery
+
+// NOTE: We cannot use normal import statements after doing some stuff, so we'll just await a dynamic import
+await import('./semantic.js')
+
 let APP = null
 
 const availableLanguages = (function () {
diff --git a/front/src/semantic.js b/front/src/semantic.js
index 279997f3d..f00a4fa94 100644
--- a/front/src/semantic.js
+++ b/front/src/semantic.js
@@ -1,25 +1,25 @@
-// require('fomantic-ui-css/components/accordion.min.js')
-require('fomantic-ui-css/components/api.min.js')
-require('fomantic-ui-css/components/checkbox.min.js')
-// require('fomantic-ui-css/components/colorize.min.js')
-require('fomantic-ui-css/components/dimmer.min.js')
-require('fomantic-ui-css/components/dropdown.min.js')
-// require('fomantic-ui-css/components/embed.min.js')
-// require('fomantic-ui-css/components/form.min.js')
-require('fomantic-ui-css/components/modal.min.js')
-// require('fomantic-ui-css/components/nag.min.js')
-// require('fomantic-ui-css/components/popup.min.js')
-require('fomantic-ui-css/components/progress.min.js')
-// require('fomantic-ui-css/components/rating.min.js')
-require('fomantic-ui-css/components/search.min.js')
-// require('fomantic-ui-css/components/shape.min.js')
-// require('fomantic-ui-css/components/sidebar.min.js')
-require('fomantic-ui-css/components/site.min.js')
-require('fomantic-ui-css/components/state.min.js')
-require('fomantic-ui-css/components/sticky.min.js')
-// require('fomantic-ui-css/components/tab.min.js')
-require('fomantic-ui-css/components/toast.min.js')
-require('fomantic-ui-css/components/transition.min.js')
-// require('fomantic-ui-css/components/video.min.js')
-require('fomantic-ui-css/components/visibility.min.js')
-// require('fomantic-ui-css/components/visit.min.js')
+// import 'fomantic-ui-css/components/accordion.min.js'
+import 'fomantic-ui-css/components/api.min.js'
+import 'fomantic-ui-css/components/checkbox.min.js'
+// import 'fomantic-ui-css/components/colorize.min.js'
+import 'fomantic-ui-css/components/dimmer.min.js'
+import 'fomantic-ui-css/components/dropdown.min.js'
+// import 'fomantic-ui-css/components/embed.min.js'
+// import 'fomantic-ui-css/components/form.min.js'
+import 'fomantic-ui-css/components/modal.min.js'
+// import 'fomantic-ui-css/components/nag.min.js'
+// import 'fomantic-ui-css/components/popup.min.js'
+import 'fomantic-ui-css/components/progress.min.js'
+// import 'fomantic-ui-css/components/rating.min.js'
+import 'fomantic-ui-css/components/search.min.js'
+// import 'fomantic-ui-css/components/shape.min.js'
+// import 'fomantic-ui-css/components/sidebar.min.js'
+import 'fomantic-ui-css/components/site.min.js'
+import 'fomantic-ui-css/components/state.min.js'
+import 'fomantic-ui-css/components/sticky.min.js'
+// import 'fomantic-ui-css/components/tab.min.js'
+import 'fomantic-ui-css/components/toast.min.js'
+import 'fomantic-ui-css/components/transition.min.js'
+// import 'fomantic-ui-css/components/video.min.js'
+import 'fomantic-ui-css/components/visibility.min.js'
+// import 'fomantic-ui-css/components/visit.min.js'