diff --git a/src/components/ScenarioSource.vue b/src/components/ScenarioSource.vue
index 109200f..6c06326 100644
--- a/src/components/ScenarioSource.vue
+++ b/src/components/ScenarioSource.vue
@@ -140,7 +140,7 @@
 <script>
 import axios from 'axios';
 import EditorNotFound from './EditorNotFound';
-const { detectLanguage, getLanguageDisplayName } = require('../utils/languageDetection');
+import { detectLanguage, getLanguageDisplayName } from '../utils/languageDetection';
 
 export default {
   name: 'ScenarioSource',
diff --git a/src/utils/languageDetection.js b/src/utils/languageDetection.js
index bddc871..d898b2f 100644
--- a/src/utils/languageDetection.js
+++ b/src/utils/languageDetection.js
@@ -152,9 +152,9 @@ function isMonacoLanguageSupported(language) {
   return supportedLanguages.includes(language);
 }
 
-// Export for CommonJS (Node.js tests) and ES modules (Vue.js components)
-module.exports = {
+// Export using ES modules syntax for modern bundlers
+export {
   detectLanguage,
-  getLanguageDisplayName,  
+  getLanguageDisplayName,
   isMonacoLanguageSupported
 };
\ No newline at end of file
diff --git a/test/language-detection.spec.js b/test/language-detection.spec.js
index 2864f65..84bc216 100644
--- a/test/language-detection.spec.js
+++ b/test/language-detection.spec.js
@@ -1,5 +1,13 @@
 const test = require('ava');
-const { detectLanguage, getLanguageDisplayName } = require('../src/utils/languageDetection.js');
+
+// Use dynamic import for ES modules
+let detectLanguage, getLanguageDisplayName;
+
+test.before(async () => {
+  const module = await import('../src/utils/languageDetection.js');
+  detectLanguage = module.detectLanguage;
+  getLanguageDisplayName = module.getLanguageDisplayName;
+});
 
 test('detectLanguage › should detect JavaScript files correctly', t => {
   const result = detectLanguage('test.js');