[BUG] Support for vite plugins and svelte preprocess

Context:

• Playwright Version: [what Playwright version do you use?] 1.22
• Operating System: [e.g. Windows, Linux or Mac] Mac
• Node.js version: [e.g. 12.22, 14.6] 18.2
• Browser: [e.g. All, Chromium, Firefox, WebKit] Chromium
• Extra: [any specific details about your environment] svelte-kit, vite, unocss

System:

• OS: macOS 12.4
• Memory: 623.73 MB / 32.00 GB

Binaries:

• Node: 18.2.0 - ~/Library/Caches/fnm_multishells/1664_1654253939618/bin/node
• npm: 8.9.0 - ~/Library/Caches/fnm_multishells/1664_1654253939618/bin/npm

Languages:

• Bash: 3.2.57 - /bin/bash

Code Snippet

use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    /* Port to use for Playwright component endpoint. */
    ctPort: 3100,

    ctViteConfig: {
      resolve: {
        alias: {
          '$lib': resolve(__dirname, './src/lib'),
        }
      },
      plugins: [
        UnoCss({ extractors: [extractorSvelte] }),
      ]
    },

// Import styles, initialize component theme here.
import "@unocss/reset/tailwind.css";
import "uno.css";
export {}

Describe the bug I am testing playwright component testing with my svelte-kit setup. I also use unocss as a css library. To make it work with svelte, I need to add it as a vite plugin. I have added the plugin configuration to playwright-ct.config.ts and have imported the library to my playwright/index.ts. However, after doing that I am getting following error

Running 1 test using 1 worker

vite v2.9.9 building for production...
✓ 3 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (1:0)
file: <project-root>/apps/web/src/lib/auth/Signup.svelte:1:0

SyntaxError: Unexpected token (1:0)

    at Parser.pp$4.raise (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:19844:13)
    at Parser.pp$9.unexpected (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:17138:8)
    at Parser.pp$5.parseExprAtom (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:19219:10)
    at Parser.pp$5.parseExprSubscripts (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:19011:19)
    at Parser.pp$5.parseMaybeUnary (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:18977:17)
    at Parser.pp$5.parseExprOps (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:18904:19)
    at Parser.pp$5.parseMaybeConditional (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:18887:19)
    at Parser.pp$5.parseMaybeAssign (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:18854:19)
    at Parser.pp$5.parseExpression (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:18817:19)
    at Parser.pp$8.parseStatement (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:17328:45)
    at Parser.pp$8.parseTopLevel (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:17195:21)
    at Parser.parse (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:16967:15)
    at Function.parse (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:17017:35)
    at Graph.contextParse (<project-root>/common/temp/node_modules/.pnpm/rollup@2.75.5/node_modules/rollup/dist/shared/rollup.js:23121:38)
    at Object.transform (<project-root>/common/temp/node_modules/.pnpm/vite@2.9.9/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:19826:27)

TypeError: Cannot read properties of undefined (reading 'httpServer')

Vite aliases works without any issue. I start getting errors only once I add vite plugins. I have also tried adding some other vite supported plugin such as rollup-plugin-visualizer. However, it also faces the same error. They all work well in my current sveltekit setup.

Add any other details about the problem here.

Likewise, I have few configuration done using svelte-preprocess. Can I configure that in my playwright-ct config?

[Uninen]

I think I found the root issue which is that I need Vue plugins for my component to work and adding those is not currently possible with the current implementation of mount. Here’s a related ticket and my comment: https://github.com/microsoft/playwright/issues/14416#issuecomment-1146062955 and here is a PR that demonstrates the problem with a working and non-working component: https://github.com/Uninen/vite-ts-tailwind-starter/pull/218

Edit: I added a clearer examples with a new commit: https://github.com/Uninen/vite-ts-tailwind-starter/pull/218 If you want to test the code, just clone the PR branch, it’s very easy to install and test out.

[pavelfeldman]

@Uninen could you file a separate ticked w/ a repro I could try? This ticket was about Svelte and is already closed. Btw, this would be a non-JSX syntax example: https://github.com/microsoft/playwright/blob/main/tests/components/ct-vue-cli/src/notation-vue.spec.ts