[BUG] Typescript - Relative path is resolving relative to tsconfig's baseUrl

[vai0]

Context:

• Playwright Version: 1.24.0
• Operating System: Debian 11
• Node.js version: 12.17.0
• Typescript version: 4.6.4

file structure

frontend/
    tsconfig.json
    src/
    playwright/
        utils.ts
        tests/
            forms_cms_standard.spec.ts

tsconfig.json

{
    "compilerOptions": {
        ...
        "baseUrl": "src"
    },
    "include": [
        "src/**/*",
        "playwright/**/*",
        ...
    ]
}

forms_cms_standard.spec.ts is importing from utils.ts relatively. import { ... } from "../utils.

frontend ➜ npx playwright test playwright/tests                                                                                                                           

Running 0 test using 0 worker


Error: Cannot find module '/home/jchi/projects/bifrost/frontend/utils'
Require stack:
- /home/jchi/projects/bifrost/frontend/playwright/tests/forms_cms_standard.spec.ts
- /home/jchi/projects/bifrost/frontend/node_modules/@playwright/test/lib/loader.js
- /home/jchi/projects/bifrost/frontend/node_modules/@playwright/test/lib/runner.js
- /home/jchi/projects/bifrost/frontend/node_modules/@playwright/test/lib/cli.js
- /home/jchi/projects/bifrost/frontend/node_modules/@playwright/test/node_modules/playwright-core/lib/cli/cli.js
- /home/jchi/projects/bifrost/frontend/node_modules/@playwright/test/node_modules/playwright-core/cli.js
- /home/jchi/projects/bifrost/frontend/node_modules/@playwright/test/cli.js

   at playwright/tests/forms_cms_standard.spec.ts:5

  3 |
  4 | import forms from "../../cypress/fixtures/forms_cms.json";
> 5 | import {
    | ^
  6 |     blockTrackingHosts,
  7 |     fillFormFields,
  8 |     goToWithParamTraits,

    at Object.<anonymous> (/home/jchi/projects/bifrost/frontend/playwright/tests/forms_cms_standard.spec.ts:5:1)

If I remove baseUrl from tsconfig playwright runs just fine, although I can't do that since the non-relative imports in my codebase will break.

This behavior is different from the documented Typescript module resolution, where relative imports should not be affected by baseUrl.

And this is confirmed when running tsc --traceResolution, as it does not error, and resolves utils.ts correctly

...
======== Resolving module '../utils' from '/home/jchi/projects/bifrost/frontend/playwright/tests/forms_cms_standard.spec.ts'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module as file / folder, candidate module location '/home/jchi/projects/bifrost/frontend/playwright/utils', target file type 'TypeScript'.
File '/home/jchi/projects/bifrost/frontend/playwright/utils.ts' exist - use it as a name resolution result.
======== Module name '../utils' was successfully resolved to '/home/jchi/projects/bifrost/frontend/playwright/utils.ts'. ========
...

[pavelfeldman]

The test in the attached PR passes for me, does it capture your set up?

[vai0]

@pavelfeldman thanks --- that test looks accurate. odd it passes, but fails on my end. i'll try stripping with the other compilerOptions I have in my config and see if they're the reason.

[pavelfeldman]

We need more information to act on this report. Please file a new one and link to this issue when you get back to it!

[denis-sokolov]

I experience the same issue and seem to have found the cause.

There must be a directory (or file) at the top-level that is confusing the path resolver. I.e. the logic of the resolver seems to be “if I can find it at the top-level, take it, but if not, then fall back to relative import”. The original test did not have the top-level entry. I’ve added a failing test in #16338.

[dgozman]

Will be fixed in the next release by #16395.