[BUG] Typescript tsconfig.json path prefixes not respected

[joshhansen]

Context:

• Playwright Version: 1.17.1
• Operating System: Linux (Fedora 35)
• Node.js version: 15.3.0
• Browser: All
• Extra: Typescript 4.4.4

System:

• OS: Linux 5.15 Fedora Linux 35 (Workstation Edition)
• Memory: 525.66 MB / 15.48 GB
• Container: Yes

Binaries:

• Node: 15.3.0 - ~/.nvm/versions/node/v15.3.0/bin/node
• Yarn: 3.1.0 - ~/.nvm/versions/node/v15.3.0/bin/yarn
• npm: 7.5.3 - ~/.nvm/versions/node/v15.3.0/bin/npm

Languages:

• Bash: 5.1.8 - /usr/bin/bash

Code Snippet

The following seem like the essentials. The definition of UserSkillDb has been simplified.

This is from a monorepo where we have extracted shared code into ./common, with ./client and ./server being separate Typescript projects which inherit from a shared ./tsconfig.json and both depend on ./common. We use the path prefix @/ to reference exports from ./common. The error is occurring in a unit test file deep in our client code.

./client/src/vuex/stores/course.test.ts:

import { UserSkillDb } from "@/model";
... (remainder isn't relevant)

./tsconfig.json:

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"importHelpers": true,
		"moduleResolution": "node",
		"skipLibCheck": true,
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"sourceMap": true,
		"baseUrl": ".",

		"noEmit": true,

		"strict": true,
		"noImplicitAny": false,

		"resolveJsonModule": true,

		"lib": ["esnext", "dom"],
		"typeRoots": [
			"./node_modules/@types",
			"./types"
		],
		"paths": {
			"@/*": ["./common/src/*"]
		}
	},
	"exclude": ["node_modules"]
}

./client/tsconfig.json:

{
	"extends": "../tsconfig.json",

	"include": ["./src/**/*.ts", "./src/**/*.vue", "./src/**/*.js", "./src/**/*.png"],
	"exclude": ["node_modules"]
}

./common/src/model/index.ts:

export interface UserSkillDb {
   x: string;
}

Then yarn playwright test from the . directory

In my case I get this output:

$ yarn playwright test
Error: Cannot find module '@/model'
Require stack:
- /home/josh/Projects/learn-something3/client/src/vuex/stores/course.test.ts
- /home/josh/Projects/learn-something3/node_modules/@playwright/test/lib/loader.js
- /home/josh/Projects/learn-something3/node_modules/@playwright/test/lib/cli.js
- /home/josh/Projects/learn-something3/node_modules/playwright-core/lib/cli/cli.js
- /home/josh/Projects/learn-something3/node_modules/playwright-core/cli.js
- /home/josh/Projects/learn-something3/node_modules/@playwright/test/cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:15)
    at Function.Module._load (node:internal/modules/cjs/loader:763:27)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/home/josh/Projects/learn-something3/client/src/vuex/stores/course.test.ts:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at Module._compile (/home/josh/Projects/learn-something3/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Object.newLoader (/home/josh/Projects/learn-something3/node_modules/pirates/lib/index.js:104:7)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Loader._requireOrImport (/home/josh/Projects/learn-something3/node_modules/@playwright/test/lib/loader.js:217:18)
    at Loader.loadTestFile (/home/josh/Projects/learn-something3/node_modules/@playwright/test/lib/loader.js:133:18) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/josh/Projects/learn-something3/client/src/vuex/stores/course.test.ts',
    '/home/josh/Projects/learn-something3/node_modules/@playwright/test/lib/loader.js',
    '/home/josh/Projects/learn-something3/node_modules/@playwright/test/lib/cli.js',
    '/home/josh/Projects/learn-something3/node_modules/playwright-core/lib/cli/cli.js',
    '/home/josh/Projects/learn-something3/node_modules/playwright-core/cli.js',
    '/home/josh/Projects/learn-something3/node_modules/@playwright/test/cli.js'
  ]
}

From other issues it seems that the Playwright project has the intention of respecting the tsconfig.json in a similar manner to Typescript itself. As such not respecting the path prefixes could be considered a bug.

If you have trouble reproducing the issue I can try probably produce a minimal repository that demonstrates it.

[OriAmir]

It's looks like playwright not support external tsconfig file and that's why the path not effect. we don't have workaround from what i read in this topic

#7121

I will be happy to hear solution.

[mxschmitt]

Playwright does not respect external tsconfig files yet, folding by that into #7121. I'd recommend to subscribe to the issue to get notified once its resolved.

For now you can use the manual transcompilation as a workaround: https://playwright.dev/docs/test-typescript

[joshhansen]

@mxschmitt The manual transcompilation seems to be working. Subscribed to the other issue. Thanks