Fix jQuery and semantic ui

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: {

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
     }

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 () {

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'