diff --git a/packages/playwright-ct-core/src/injected/serializers.ts b/packages/playwright-ct-core/src/injected/serializers.ts
index 05934b01de..be083e27db 100644
--- a/packages/playwright-ct-core/src/injected/serializers.ts
+++ b/packages/playwright-ct-core/src/injected/serializers.ts
@@ -68,8 +68,9 @@ export function transformObject(value: any, mapping: (v: any) => { result: any }
   }
   if (value?.__pw_type === 'jsx' && typeof value.type === 'function') {
     throw new Error([
-      'JSX component was not able to get resolved.',
-      'Make sure to define components outside of your test file.'
+      `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 = {};
diff --git a/tests/components/ct-react-vite/tests/render.spec.tsx b/tests/components/ct-react-vite/tests/render.spec.tsx
index 28df6f997f..d00a313e9e 100644
--- a/tests/components/ct-react-vite/tests/render.spec.tsx
+++ b/tests/components/ct-react-vite/tests/render.spec.tsx
@@ -38,11 +38,11 @@ function MyInlineComponent({ value }: { value: string }) {
 }
 
 test('render inline component with an error', async ({ mount }) => {
-  await expect(mount(<MyInlineComponent value="Max" />)).rejects.toThrow('JSX component was not able to get resolved');
+  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('JSX component was not able to get resolved');
+  </DefaultChildren>)).rejects.toThrow('Component "MyInlineComponent" cannot be mounted.');
 });