diff --git a/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts b/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
index 91dc2e73e0c7..20947f59e5a9 100644
--- a/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
+++ b/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
@@ -23,7 +23,10 @@ export const swc: PresetProperty<'swc'> = (config: Record<string, any>): Record<
         safari: 15,
         firefox: 91,
       },
-      bugfixes: config?.env?.bugfixes ?? false,
+      // Transpiles the broken syntax to the closest non-broken modern syntax.
+      // E.g. it won't transpile parameter destructuring in Safari
+      // which would break how we detect if the mount context property is used in the play function.
+      bugfixes: config?.env?.bugfixes ?? true,
     },
   };
 };
diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index 9aa59d705539..86f706ca4c34 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -120,6 +120,7 @@ export const babel = async (_: unknown, options: Options) => {
           [
             '@babel/preset-env',
             {
+              bugfixes: true,
               targets: {
                 // This is the same browser supports that we use to bundle our manager and preview code.
                 chrome: 100,
diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts
index a63ea2fef03d..ce450eade352 100644
--- a/code/frameworks/nextjs/src/babel/preset.ts
+++ b/code/frameworks/nextjs/src/babel/preset.ts
@@ -92,6 +92,7 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
     // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
     modules: 'auto',
     exclude: ['transform-typeof-symbol'],
+    bugfixes: true,
     targets: {
       chrome: 100,
       safari: 15,
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index d4420baff8bd..53cf944db194 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -126,6 +126,7 @@ export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOption
           [
             'next/dist/compiled/babel/preset-env',
             {
+              bugfixes: true,
               targets: {
                 chrome: 100,
                 safari: 15,
diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
index ceac39b1f740..622e52e38406 100644
--- a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
+++ b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
@@ -113,6 +113,10 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
     // modules.
     sourceFileName: filename,
   };
+  // Transpiles the broken syntax to the closest non-broken modern syntax.
+  // E.g. it won't transpile parameter destructuring in Safari
+  // which would break how we detect if the mount context property is used in the play function.
+  programmaticOptions.env.bugfixes = true;
 
   if (!programmaticOptions.inputSourceMap) {
     delete programmaticOptions.inputSourceMap;