diff --git a/apps/client/src/features/app-settings/panel/settings-panel/composite/StyleEditor.tsx b/apps/client/src/features/app-settings/panel/settings-panel/composite/StyleEditor.tsx
index 3e12b0081..5f6096c42 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/composite/StyleEditor.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/composite/StyleEditor.tsx
@@ -1,8 +1,9 @@
 import { memo } from 'react';
 import Editor from 'react-simple-code-editor';
-import Prism from 'virtual:prismjs';
-import 'prismjs/components/prism-css';
+
 import 'prismjs/themes/prism-tomorrow.min.css';
+import Prism from 'virtual:prismjs';
+
 import style from './StyleEditor.module.scss';
 
 interface CodeEditorProps {
diff --git a/apps/client/vite.config.js b/apps/client/vite.config.js
index cef4525ba..41fd03711 100644
--- a/apps/client/vite.config.js
+++ b/apps/client/vite.config.js
@@ -17,6 +17,11 @@ const ReactCompilerConfig = {
 
 export default defineConfig({
   base: './', // Ontime cloud: we use relative paths to allow them to reference a dynamic base set at runtime
+  legacy: {
+    // Temporary compatibility for CJS packages affected by Vite 8 interop changes.
+    // ie: react-simple-code-editor
+    inconsistentCjsInterop: true,
+  },
   define: {
     // we pass along the NODE_ENV here in case it is a docker build
     'import.meta.env.IS_DOCKER': process.env.NODE_ENV === 'docker',