diff --git a/changelogs/fragments/8993.yml b/changelogs/fragments/8993.yml
new file mode 100644
index 000000000000..dac519c8b746
--- /dev/null
+++ b/changelogs/fragments/8993.yml
@@ -0,0 +1,2 @@
+fix:
+- Support imports without extensions in cypress webpack build ([#8993](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8993))
\ No newline at end of file
diff --git a/cypress.config.js b/cypress.config.js
deleted file mode 100644
index 8ac393867e20..000000000000
--- a/cypress.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  defaultCommandTimeout: 60000,
-  requestTimeout: 60000,
-  responseTimeout: 60000,
-  viewportWidth: 2000,
-  viewportHeight: 1320,
-  env: {
-    openSearchUrl: 'http://localhost:9200',
-    SECURITY_ENABLED: false,
-    AGGREGATION_VIEW: false,
-    username: 'admin',
-    password: 'myStrongPassword123!',
-    ENDPOINT_WITH_PROXY: false,
-    MANAGED_SERVICE_ENDPOINT: false,
-    VISBUILDER_ENABLED: true,
-    DATASOURCE_MANAGEMENT_ENABLED: false,
-    ML_COMMONS_DASHBOARDS_ENABLED: true,
-    WAIT_FOR_LOADER_BUFFER_MS: 0,
-  },
-  e2e: {
-    baseUrl: 'http://localhost:5601',
-    specPattern: 'cypress/integration/**/*_spec.{js,jsx,ts,tsx}',
-  },
-});
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 000000000000..67e7b4f5039b
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { defineConfig } from 'cypress';
+import webpackPreprocessor from '@cypress/webpack-preprocessor';
+
+module.exports = defineConfig({
+  defaultCommandTimeout: 60000,
+  requestTimeout: 60000,
+  responseTimeout: 60000,
+  viewportWidth: 2000,
+  viewportHeight: 1320,
+  env: {
+    openSearchUrl: 'http://localhost:9200',
+    SECURITY_ENABLED: false,
+    AGGREGATION_VIEW: false,
+    username: 'admin',
+    password: 'myStrongPassword123!',
+    ENDPOINT_WITH_PROXY: false,
+    MANAGED_SERVICE_ENDPOINT: false,
+    VISBUILDER_ENABLED: true,
+    DATASOURCE_MANAGEMENT_ENABLED: false,
+    ML_COMMONS_DASHBOARDS_ENABLED: true,
+    WAIT_FOR_LOADER_BUFFER_MS: 0,
+  },
+  e2e: {
+    baseUrl: 'http://localhost:5601',
+    specPattern: 'cypress/integration/**/*_spec.{js,jsx,ts,tsx}',
+    testIsolation: false,
+    setupNodeEvents,
+  },
+});
+
+function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Cypress.PluginConfigOptions {
+  const { webpackOptions } = webpackPreprocessor.defaultOptions;
+
+  /**
+   * By default, cypress' internal webpack preprocessor doesn't allow imports without file extensions.
+   * This makes our life a bit hard since if any file in our testing dependency graph has an import without
+   * the .js extension our cypress build will fail.
+   *
+   * This extra rule relaxes this a bit by allowing imports without file extension
+   *     ex. import module from './module'
+   */
+  webpackOptions!.module!.rules.unshift({
+    test: /\.m?js/,
+    resolve: {
+      enforceExtension: false,
+    },
+  });
+
+  on(
+    'file:preprocessor',
+    webpackPreprocessor({
+      webpackOptions,
+    })
+  );
+
+  return config;
+}
diff --git a/package.json b/package.json
index 44315e13d5be..298ce702e854 100644
--- a/package.json
+++ b/package.json
@@ -260,6 +260,7 @@
     "@babel/plugin-transform-class-static-block": "^7.24.4",
     "@babel/register": "^7.22.9",
     "@babel/types": "^7.22.9",
+    "@cypress/webpack-preprocessor": "^5.17.1",
     "@elastic/apm-rum": "^5.6.1",
     "@elastic/charts": "31.1.0",
     "@elastic/ems-client": "7.10.0",