[BUG] When using baseUrl, "Rollup failed to resolve import"

[jacobweber]

System info

• Playwright Version: [@playwright/experimental-ct-react ^1.39.0]
• Operating System: [macOS 14.1]
• Browser: [Chromium]
• Other info:

Source code

• I provided exact source code that allows reproducing the issue locally.

Test file (self-contained)
my-vite-app.tar.gz

Steps

• Create app:

nvm use 16
npm create vite@latest my-vite-app -- --template react-ts
cd my-vite-app
npm i
npm init playwright@latest -- --ct

• Set "baseUrl": "./src" in tsconfig.json.
• Add App.spec.ts, which includes a import App from 'App';
• Run tests with npm run test-ct.

Expected

Test runs successfully.

Actual

Exception:

Error: [vite]: Rollup failed to resolve import "App" from "/my-vite-app/playwright/index.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

    at viteWarn (/my-vite-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:48216:27)
    at onwarn (/my-vite-app/node_modules/@vitejs/plugin-react/dist/index.mjs:249:9)
    at onRollupWarning (/my-vite-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:48245:9)
    at onwarn (/my-vite-app/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:47976:13)
    at /my-vite-app/node_modules/rollup/dist/es/shared/node-entry.js:24276:13
    at Object.logger (/my-vite-app/node_modules/rollup/dist/es/shared/node-entry.js:25950:9)
    at ModuleLoader.handleInvalidResolvedId (/my-vite-app/node_modules/rollup/dist/es/shared/node-entry.js:24862:26)
    at ModuleLoader.resolveDynamicImport (/my-vite-app/node_modules/rollup/dist/es/shared/node-entry.js:24920:58)
    at /my-vite-app/node_modules/rollup/dist/es/shared/node-entry.js:24807:32

[dgozman]

@jacobweber You have to configure vite aliases separately from tsconfig. Take a look at this example. Let me know whether this helps.

[jacobweber]

Thanks @dgozman, that does work (if I list all the subdirectories of my base dir as aliases). I was thinking it worked with tsconfig's baseUrl, based on this (but maybe that doesn't apply to component tests?)

[dgozman]

@jacobweber Yeah, this documentation is about e2e tests. We should improve our components documentation for sure!

[atsolberg]

Coming from a remix app that aliases the app directory to ~ this worked for me:

use: {
  ctViteConfig: {
    resolve: {
      alias: {
        '~': resolve(__dirname, './app'),
      },
    },
  },
},

[SDxBacon]

Coming from a remix app that aliases the app directory to ~ this worked for me:

use: {
  ctViteConfig: {
    resolve: {
      alias: {
        '~': resolve(__dirname, './app'),
      },
    },
  },
},

@atsolberg Could you please share where you placed these configurations to make Playwright work?

I'm having trouble configuring Playwright in my React project, which is a pure React setup without using any template.
I've organized my project as follows:

.
├── src
│   ├── views
│   ├── components
│   └── App.spec.js
├── playwright-ct.config.js
├── webpack.config.js
└── jsconfig.json

In my project, I will import files that inside src/components like:

import SomeComponent from '@/components/SomeComponent';

Thus, I create an vite.config.js trying to configure playwright

// vite.config.js
import { resolve } from 'path';
import { defineConfig } from '@playwright/experimental-ct-react';

export default defineConfig({
  use: {
    ctViteConfig: {
      resolve: {
        alias: {
          '@': resolve(__dirname, './src'),
        },
      },
    },
  },
});

However, even after executing yarn run test-ct, I'm consistently encountering a "failed to resolve import" error. Could someone kindly guide me on where I might be going wrong with these configurations?

[codenimble]

Regarding your last post @SDxBacon ... a couple of things:

1. Put the ctViteConfig under the "use" portion of the configuration in your playwright-ct.config.js
2. You don't need to create a vite.config.js file.
3. Make sure all of your '@' paths in the compilerOptions of yout tsconfig.json are all realtive to ./src for the '@': resolve(__dirname, './src'), to work. The resolve trick works if and only if all of your @ definitions in your tsconfig.json are realitive to src. If you have short cuts to deep paths than you need to define them as well.

e.g. "@wizard/*": [ "./components/wizard/*"] in tsconfig.json would need "@wizard": resolve(__dirname,"./src/components/wizard"), in the playwright-ct.config.js