Trace Viewer Preview is white or dark only

Question

I have a problem with using my trace viewer locally. When I get the result from my tests as list view and I open my trace viewer for a test case, I got all events right but no preview of the browser at a specific event. I am testing a react app.

This is my playwright config:

import type { PlaywrightTestConfig, expect } from '@playwright/test';
import { devices } from '@playwright/test';
import dotenv from 'dotenv';

dotenv.config();

const config: PlaywrightTestConfig = {
  testDir: './src',
  timeout: 0,
  forbidOnly: !!process.env.CI,
  retries: 10,

  reporter: [
    ['list'],
    ['html', { outputFolder: 'report', open: 'on-failure' }],
  ],
  use: {
    actionTimeout: 60000,
    navigationTimeout: 60000,
    video: 'retain-on-failure',
    screenshot: 'on',
    viewport: { width: 1920, height: 1080 },
    trace: 'retain-on-failure',
    baseURL: process.env['BASE_URL'],
  },

  /* Configure projects for major browsers */
  webServer: {
    timeout: 60000,
    command: 'npm run start:prod',
    port: 4200,
    reuseExistingServer: false,
  },
  projects: [
    {
      name: 'chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};

export default config;

Anyone faced a similar problem with react maybe? Or maybe my config is wrong? For me it seems ok but who knows.