Fix loading of emojis JSON

Use `fetch` instead of Webpack (RSPack) chunks

Updates #3764

Author: jcbrand

CHANGES.md

@@ -3,6 +3,7 @@
 ## 11.0.2 (Unreleased)
 
 - #3700: Fix exception that occurs when optional cp attribute is missing
+- #3730 QR Code is not valid
 - Add approval banner in chats with requesting contacts or unsaved contacts
 - Some fixes regarding manually resized chats in `overlayed` view mode.
 - Replace webpack with [rspack](https://rspack.rs)

karma.conf.js

@@ -10,7 +10,13 @@ module.exports = function(config) {
     files: [
       { pattern: 'dist/*.js.map', included: false },
       { pattern: 'dist/*.css.map', included: false },
-      { pattern: "dist/emojis.js", served: true },
+      {
+        pattern: "dist/emoji.json",
+        watched: false,
+        included: false,
+        served: true,
+        type: 'json'
+      },
       "src/shared/tests/tests.css",
       "dist/converse.js",
       "dist/converse.css",
@@ -162,6 +168,7 @@ module.exports = function(config) {
     ],
 
     proxies: {
+      "/dist/emoji.json": "/base/dist/emoji.json",
       "/dist/images/custom_emojis/": "/base/dist/images/custom_emojis/",
       "/images/logo/": "/base/dist/images/logo/"
     },

rspack/rspack.build.js

@@ -88,6 +88,7 @@ const plugins = [
             { from: 'logo/conversejs-gold-gradient.svg', to: 'images/logo' },
             { from: 'src/shared/styles/webfonts', to: 'webfonts' },
             { from: 'manifest.json', to: 'manifest.json' },
+            { from: 'src/headless/plugins/emoji/emoji.json', to: 'emoji.json' },
         ],
     }),
 ];
@@ -103,10 +104,6 @@ module.exports = [
         },
         output: {
             filename: '[name].js',
-            library: {
-                type: 'umd',
-                name: 'converse'
-            }
         },
     }),
     // ESM Build
@@ -118,7 +115,8 @@ module.exports = [
             'converse.min': path.resolve(__dirname, '../src/entry.js'),
         },
         experiments: {
-            outputModule: true
+            outputModule: true,
+            topLevelAwait: true,
         },
         output: {
             filename: '[name].esm.js',

src/headless/plugins/emoji/api.js

@@ -11,11 +11,21 @@ const emojis = {
      * @method api.emojis.initialize
      * @returns {Promise}
      */
-    async initialize () {
+    async initialize() {
         if (!converse.emojis.initialized) {
             converse.emojis.initialized = true;
 
-            const module = await import(/*webpackChunkName: "emojis" */ './emoji.json');
+            let json;
+            try {
+                const path = api.settings.get('assets_path');
+                const response = await fetch(`${path}/emoji.json`);
+                if (!response.ok) throw new Error('Failed to fetch emoji.json');
+                json = await response.json();
+            } catch (e) {
+                console.error('Failed to load emoji.json:', e);
+                json = {};
+            }
+
             /**
              * *Hook* which allows plugins to modify emojis definition.
              *
@@ -37,24 +47,20 @@ const emojis = {
              *      return json;
              *  });
              */
-            const json = await api.hook('loadEmojis', {}, module.default);
+            json = await api.hook('loadEmojis', {}, json);
             converse.emojis.json = json;
 
-            converse.emojis.by_sn = Object.keys(json).reduce(
-                (result, cat) => Object.assign(result, json[cat]),
-                {}
-            );
+            converse.emojis.by_sn = Object.keys(json).reduce((result, cat) => Object.assign(result, json[cat]), {});
             converse.emojis.list = Object.values(converse.emojis.by_sn);
             converse.emojis.list.sort((a, b) => (a.sn < b.sn ? -1 : a.sn > b.sn ? 1 : 0));
             converse.emojis.shortnames = converse.emojis.list.map((m) => m.sn);
-            const getShortNames = () =>
-                converse.emojis.shortnames.map((s) => s.replace(/[+]/g, '\\$&')).join('|');
+            const getShortNames = () => converse.emojis.shortnames.map((s) => s.replace(/[+]/g, '\\$&')).join('|');
             converse.emojis.shortnames_regex = new RegExp(getShortNames(), 'gi');
             converse.emojis.initialized_promise.resolve();
         }
         return converse.emojis.initialized_promise;
     },
-}
+};
 
 const emojis_api = { emojis };