diff --git a/.changelog/10605.txt b/.changelog/10605.txt
new file mode 100644
index 0000000000..9d60fb4229
--- /dev/null
+++ b/.changelog/10605.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix KV editor syntax highlighting
+```
diff --git a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
index f347060efe..7c17b7ba80 100644
--- a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
+++ b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
@@ -3,17 +3,19 @@ export function initialize(application) {
   const appName = application.application.name;
   const doc = application.lookup('service:-document');
   // pick codemirror syntax highlighting paths out of index.html
-  const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
+  const fs = new Map(
+    Object.entries(JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent))
+  );
   // configure syntax highlighting for CodeMirror
   CodeMirror.modeURL = {
     replace: function(n, mode) {
-      switch (mode) {
+      switch (mode.trim()) {
         case 'javascript':
-          return fs['codemirror/mode/javascript/javascript.js'];
+          return fs.get(['codemirror', 'mode', 'javascript', 'javascript.js'].join('/'));
         case 'ruby':
-          return fs['codemirror/mode/ruby/ruby.js'];
+          return fs.get(['codemirror', 'mode', 'ruby', 'ruby.js'].join('/'));
         case 'yaml':
-          return fs['codemirror/mode/yaml/yaml.js'];
+          return fs.get(['codemirror', 'mode', 'yaml', 'yaml.js'].join('/'));
       }
     },
   };
diff --git a/ui/packages/consul-ui/lib/startup/templates/body.html.js b/ui/packages/consul-ui/lib/startup/templates/body.html.js
index 3187b90b99..975cbd6506 100644
--- a/ui/packages/consul-ui/lib/startup/templates/body.html.js
+++ b/ui/packages/consul-ui/lib/startup/templates/body.html.js
@@ -34,7 +34,7 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
   <script type="application/json" data-consul-ui-fs>
   {
     "text-encoding/encoding-indexes.js": "${rootURL}assets/encoding-indexes.js",
-    "text-encoding/encoding.js": "${rootURL}assets/encoding-indexes.js",
+    "text-encoding/encoding.js": "${rootURL}assets/encoding.js",
     "css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
     "codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.js",
     "codemirror/mode/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
diff --git a/ui/packages/consul-ui/vendor/init.js b/ui/packages/consul-ui/vendor/init.js
index 7852b86490..cefbbb81f7 100644
--- a/ui/packages/consul-ui/vendor/init.js
+++ b/ui/packages/consul-ui/vendor/init.js
@@ -1,5 +1,7 @@
 (function(doc, appName) {
-  const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
+  const fs = new Map(
+    Object.entries(JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent))
+  );
   const appendScript = function(src) {
     var $script = doc.createElement('script');
     $script.src = src;
@@ -8,11 +10,11 @@
 
   // polyfills
   if (!('TextDecoder' in window)) {
-    appendScript(fs['text-encoding/encoding-indexes.js']);
-    appendScript(fs['text-encoding/encoding.js']);
+    appendScript(fs.get(`${['text-encoding', 'encoding-indexes'].join('/')}.js`));
+    appendScript(fs.get(`${['text-encoding', 'encoding'].join('/')}.js`));
   }
   if (!(window.CSS && window.CSS.escape)) {
-    appendScript(fs['css.escape/css.escape.js']);
+    appendScript(fs.get(`${['css.escape', 'css.escape'].join('/')}.js`));
   }
 
   try {