Hot can I add playwright-ct-angular to new nx angular project?

[alex-aveva]

Hello,

I'm trying to evaluate possibility of using playwright component testing.

Created fresh angular project using npx create-nx-workspace <my-project-name> and attempted to add playwright-ct-angular as described at https://github.com/jscutlery/devkit/tree/main/packages/playwright-ct-angular , here's my exact steps

• npm init playwright@latest -- --ct
• npm install -D @jscutlery/playwright-ct-angular @playwright/test
• copied content of https://github.com/jscutlery/devkit/blob/main/tests/playwright-ct-angular-wide/playwright-ct.config.ts to my playwright-ct.config.ts

When I run npm run test-ct I get following error:
~/pw-nx$ npm run test-ct

@pw-nx/source@0.0.0 test-ct
playwright test -c playwright-ct.config.ts

Error: Package subpath './lib/mount' is not defined by "exports" in /home/alex-aveva/pw-nx/node_modules/@playwright/test/package.json
at new NodeError (node:internal/errors:387:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:365:9)
at packageExportsResolve (node:internal/modules/esm/resolve:649:3)
at resolveExports (node:internal/modules/cjs/loader:554:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:594:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1012:27)
at Function.resolveFilename (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/transform/transform.js:191:36)
at Function.Module._load (node:internal/modules/cjs/loader:871:27)
at Module.require (node:internal/modules/cjs/loader:1098:19)
at require (node:internal/modules/cjs/helpers:108:18)
at Object. (/home/alex-aveva/pw-nx/node_modules/@jscutlery/playwright-ct-angular/index.cjs:6:13)
at Module._compile (node:internal/modules/cjs/loader:1196:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
at Object.i..ut._extensions. (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
at Module.load (node:internal/modules/cjs/loader:1074:32)
at Function.Module._load (node:internal/modules/cjs/loader:909:12)
at Module.require (node:internal/modules/cjs/loader:1098:19)
at require (node:internal/modules/cjs/helpers:108:18)
at Object. (/home/alex-aveva/pw-nx/playwright-ct.config.ts:2:1)
at Module._compile (node:internal/modules/cjs/loader:1196:14)
at Module.f._compile (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:994)
at Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
at Object.i..ut._extensions. (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
at Module.load (node:internal/modules/cjs/loader:1074:32)
at Function.Module._load (node:internal/modules/cjs/loader:909:12)
at Module.require (node:internal/modules/cjs/loader:1098:19)
at require (node:internal/modules/cjs/helpers:108:18)
at requireOrImport (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/transform/transform.js:172:20)
at requireOrImportDefaultObject (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/common/configLoader.js:83:53)
at ConfigLoader.loadConfigFile (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/common/configLoader.js:56:26)
at runTests (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/cli.js:120:55)
at qr. (/home/alex-aveva/pw-nx/node_modules/@playwright/test/lib/cli.js:40:7) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Wonder what I'm missing

[yjaaidi]

Hi @alex-aveva, thank you for raising this issue.
We'll check this out and keep you posted.

[sdedieu]

👋

Faced the same issue and it was due to a too high version of the @playwright/test package compared to the @jscutlery/playwright-ct-angular installed.

I went with the "@playwright/test": "~1.28.0" it solved the issue. (I'm on ng15 and "@jscutlery/playwright-ct-angular": "0.1.4")