diff --git a/packages/dev/core/src/Compute/computeEffect.ts b/packages/dev/core/src/Compute/computeEffect.ts
index 6f1a23a82f7..b36998f4e09 100644
--- a/packages/dev/core/src/Compute/computeEffect.ts
+++ b/packages/dev/core/src/Compute/computeEffect.ts
@@ -17,23 +17,21 @@ import type { Engine } from "../Engines/engine";
  *  * object: `{ compute: "custom" }`, used with `Effect.ShadersStore["customVertexShader"]` and `Effect.ShadersStore["customFragmentShader"]`
  *  * string: `"./COMMON_NAME"`, used with external files COMMON_NAME.vertex.fx and COMMON_NAME.fragment.fx in index.html folder.
  */
-export type IComputeShaderPath =
-    | {
-          /**
-           * Directly pass the shader code
-           */
-          computeSource?: string;
-          /**
-           * Used with Effect.ShadersStore. If the `vertex` is set to `"custom`, then
-           * Babylon.js will read from Effect.ShadersStore["customVertexShader"]
-           */
-          compute?: string;
-          /**
-           * Used with shader code in script tags
-           */
-          computeElement?: string;
-      }
-    | string;
+export type IComputeShaderPath = {
+    /**
+     * Directly pass the shader code
+     */
+    computeSource?: string;
+    /**
+     * Used with Effect.ShadersStore. If the `vertex` is set to `"custom`, then
+     * Babylon.js will read from Effect.ShadersStore["customVertexShader"]
+     */
+    compute?: string;
+    /**
+     * Used with shader code in script tags
+     */
+    computeElement?: string;
+};
 
 /**
  * Options to be used when creating a compute effect.
@@ -74,7 +72,7 @@ export class ComputeEffect {
     /**
      * Name of the effect.
      */
-    public name: IComputeShaderPath;
+    public name: IComputeShaderPath | string;
     /**
      * String container all the define statements that should be set on the shader.
      */
@@ -135,7 +133,7 @@ export class ComputeEffect {
      * @param engine The engine the effect is created for
      * @param key Effect Key identifying uniquely compiled shader variants
      */
-    constructor(baseName: IComputeShaderPath, options: IComputeEffectCreationOptions, engine: Engine, key = "") {
+    constructor(baseName: IComputeShaderPath | string, options: IComputeEffectCreationOptions, engine: Engine, key = "") {
         this.name = baseName;
         this._key = key;
 
@@ -151,7 +149,7 @@ export class ComputeEffect {
         this._shaderRepository = ShaderStore.GetShadersRepository(this._shaderLanguage);
         this._includeShaderStore = ShaderStore.GetIncludesShadersStore(this._shaderLanguage);
 
-        let computeSource: IComputeShaderPath | HTMLElement;
+        let computeSource: IComputeShaderPath | HTMLElement | string;
 
         const hostDocument = IsWindowObjectExist() ? this._engine.getHostDocument() : null;
 
diff --git a/packages/dev/core/src/Compute/computeShader.ts b/packages/dev/core/src/Compute/computeShader.ts
index a608913f633..17b949bf9c3 100644
--- a/packages/dev/core/src/Compute/computeShader.ts
+++ b/packages/dev/core/src/Compute/computeShader.ts
@@ -55,7 +55,7 @@ type ComputeBindingListInternal = { [key: string]: { type: ComputeBindingType; o
  */
 export class ComputeShader {
     private _engine: ThinEngine;
-    private _shaderPath: IComputeShaderPath;
+    private _shaderPath: IComputeShaderPath | string;
     private _options: IComputeShaderOptions;
     private _effect: ComputeEffect;
     private _cachedDefines: string;
@@ -123,7 +123,7 @@ export class ComputeShader {
      *  * string: try first to find the code in ShaderStore.ShadersStoreWGSL[shaderPath + "ComputeShader"]. If not, assumes it is a file with name shaderPath.compute.fx in index.html folder.
      * @param options Define the options used to create the shader
      */
-    constructor(name: string, engine: ThinEngine, shaderPath: IComputeShaderPath, options: Partial<IComputeShaderOptions> = {}) {
+    constructor(name: string, engine: ThinEngine, shaderPath: IComputeShaderPath | string, options: Partial<IComputeShaderOptions> = {}) {
         this.name = name;
         this._engine = engine;
         this.uniqueId = UniqueIdGenerator.UniqueId;
diff --git a/packages/dev/core/src/Engines/Extensions/engine.computeShader.ts b/packages/dev/core/src/Engines/Extensions/engine.computeShader.ts
index 68ee77f1ff4..77a9c6a0498 100644
--- a/packages/dev/core/src/Engines/Extensions/engine.computeShader.ts
+++ b/packages/dev/core/src/Engines/Extensions/engine.computeShader.ts
@@ -42,12 +42,14 @@ declare module "../../Engines/thinEngine" {
          * @returns The new compute effect
          */
         createComputeEffect(
-            baseName: IComputeShaderPath & {
-                /**
-                 * @internal
-                 */
-                computeToken?: string;
-            },
+            baseName:
+                | string
+                | (IComputeShaderPath & {
+                      /**
+                       * @internal
+                       */
+                      computeToken?: string;
+                  }),
             options: IComputeEffectCreationOptions
         ): ComputeEffect;
 
diff --git a/packages/dev/core/src/Engines/WebGPU/Extensions/engine.computeShader.ts b/packages/dev/core/src/Engines/WebGPU/Extensions/engine.computeShader.ts
index 941b12223a0..d9edc081866 100644
--- a/packages/dev/core/src/Engines/WebGPU/Extensions/engine.computeShader.ts
+++ b/packages/dev/core/src/Engines/WebGPU/Extensions/engine.computeShader.ts
@@ -24,7 +24,7 @@ WebGPUEngine.prototype.createComputeContext = function (): IComputeContext | und
     return new WebGPUComputeContext(this._device, this._cacheSampler);
 };
 
-WebGPUEngine.prototype.createComputeEffect = function (baseName: IComputeShaderPath & { computeToken?: string }, options: IComputeEffectCreationOptions): ComputeEffect {
+WebGPUEngine.prototype.createComputeEffect = function (baseName: string | (IComputeShaderPath & { computeToken?: string }), options: IComputeEffectCreationOptions): ComputeEffect {
     const compute = typeof baseName === "string" ? baseName : baseName.computeToken || baseName.computeSource || baseName.computeElement || baseName.compute;
 
     const name = compute + "@" + options.defines;