[REGRESSION]: Component testing fails when using aliases in `ctViteConfig`

stephenwade commented 7 months ago

Version

1.42.1

Steps to reproduce

Clone https://github.com/stephenwade/playwright-issue-repro-vigilant-giggle
Run npm install
Run npm test

Expected behavior

The test runs.

Actual behavior

The test does not run. The following error is displayed:

Error: [vite:load-fallback] Could not load /app/MyComponent (imported by tests/MyComponentTest.tsx): ENOENT: no such file or directory, open '/app/MyComponent'

Additional context

This only happens when both of these conditions are met:

The config file uses ctViteConfig.resolve.alias to add an alias path.
The aliased path is imported by a helper file, not by the test file.

I can't remove the ctViteConfig settings because my project uses paths in the TSConfig file. My bundler understands the paths, but Vite in Playwright component testing doesn't.

This was working fine in 1.41.2.

Environment

System:
    OS: macOS 14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 46.35 MB / 16.00 GB
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.12.1 - /usr/local/bin/pnpm
  IDEs:
    VSCode: 1.87.2 - /usr/local/bin/code
  Languages:
    Bash: 5.2.26 - /usr/local/bin/bash
  npmPackages:
    @playwright/experimental-ct-react: 1.42.1 => 1.42.1 
    @playwright/test: 1.42.1 => 1.42.1

dgozman commented 6 months ago

@stephenwade According to Vite docs, "Relative alias values will be used as-is and will not be resolved into file system paths". The following config works for me, tweaked from the repro. Note the path.resolve().

import { defineConfig, devices } from '@playwright/experimental-ct-react';
import path from 'path';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: 'tests',

  use: {
    ctTemplateDir: 'tests',
    ctViteConfig: {
      resolve: {
        // Match "paths" in tsconfig.json
        alias: {
          '~': path.resolve(__dirname, 'app'),
        },
      },
    },
  },

  projects: [
    {
      name: 'chrome',
      use: devices['Desktop Chrome'],
    },
  ],
});

stephenwade commented 6 months ago

That works for me too. I wonder why it worked before? Maybe something to do with the upgrade to Vite 5?

dgozman commented 6 months ago

Maybe something to do with the upgrade to Vite 5?

Most likely.

microsoft / playwright