diff --git a/packages/playwright-ct-core/src/injected/serializers.ts b/packages/playwright-ct-core/src/injected/serializers.ts
index d07be7c1f8..be083e27db 100644
--- a/packages/playwright-ct-core/src/injected/serializers.ts
+++ b/packages/playwright-ct-core/src/injected/serializers.ts
@@ -66,6 +66,13 @@ export function transformObject(value: any, mapping: (v: any) => { result: any }
       result.push(transformObject(item, mapping));
     return result;
   }
+  if (value?.__pw_type === 'jsx' && typeof value.type === 'function') {
+    throw new Error([
+      `Component "${value.type.name}" cannot be mounted.`,
+      `Most likely, this component is defined in the test file. Create a test story instead.`,
+      `For more information, see https://playwright.dev/docs/test-components#test-stories.`,
+    ].join('\n'));
+  }
   const result2: any = {};
   for (const [key, prop] of Object.entries(value))
     result2[key] = transformObject(prop, mapping);
diff --git a/tests/components/ct-react-vite/tests/render.spec.tsx b/tests/components/ct-react-vite/tests/render.spec.tsx
index 1d82d21b3a..d00a313e9e 100644
--- a/tests/components/ct-react-vite/tests/render.spec.tsx
+++ b/tests/components/ct-react-vite/tests/render.spec.tsx
@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import Button from '@/components/Button';
 import EmptyFragment from '@/components/EmptyFragment';
 import { ComponentAsProp } from '@/components/ComponentAsProp';
+import DefaultChildren from '@/components/DefaultChildren';
 
 test('render props', async ({ mount }) => {
   const component = await mount(<Button title="Submit" />);
@@ -31,3 +32,17 @@ test('render an empty component', async ({ mount, page }) => {
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');
 });
+
+function MyInlineComponent({ value }: { value: string }) {
+  return <>Hello {value}</>;
+}
+
+test('render inline component with an error', async ({ mount }) => {
+  await expect(mount(<MyInlineComponent value="Max" />)).rejects.toThrow('Component "MyInlineComponent" cannot be mounted.');
+});
+
+test('render inline component with an error if its nested', async ({ mount }) => {
+  await expect(mount(<DefaultChildren>
+    <MyInlineComponent value="Max" />
+  </DefaultChildren>)).rejects.toThrow('Component "MyInlineComponent" cannot be mounted.');
+});