[BUG] Can't use component testing in existing project

Context:

• Playwright Version: 1.26.1
• Operating System: Mac
• Node.js version: 16.13.0
• Browser: All

CodeSandbox link showing bug (running below repo): https://github.com/piotrpalek/playwright-issue Github link to example repo: https://github.com/piotrpalek/template-hcp/tree/playwright

The error

Error: Cannot find module '/project/template-hcp/spec/javascripts/utils/apiMock' imported from /project/template-hcp/src/App.pw.tsx

Describe the bug

Hey, I’m trying to run playwright, on an existing webpack project, but I’m getting an issue when trying to import modules without adding a file extension. It’s saying “Error: Cannot find module” when trying to run it. I’ve succeeded in making an example repo showing the exact same issue.

It would be pretty cumbersome (and against our current styleguide) to change all imports to have file extensions. Is there a workaround I could use here?

Extra

After some initial debugging I’ve found that at this point (filename.endsWith...), playwright throws an error, it’s just getting swallowed along the way. The error that it’s throwing is:

'Cannot read properties of null (reading 'endsWith')'

[yury-s]

@yury-s that’s weird I just tried the repo from scratch and yarn run test-ct works. Did you clone it from scratch? I’ve changed the link to point to a fresh repo to make sure.

Oh, you updated the link for CodeSandbox, I was using the second one. I can reproduce it with https://github.com/piotrpalek/playwright-issue

[pavelfeldman]

I think we are on the same page now.

In terms of actionability on this bug, configuring aliases is somewhat a mess in the Node land: different bundlers will use different config files for that, they won’t respect the tsconfig’s ones. In the end every framework ends up introducing its own config. Here is an example. Our options would be to:

• A: introduce aliases in our config
• B: respect aliases from tsconfig for JS files
• C: do both: introduce aliases and fall back to tsconfig if there is any

I don’t think we should do B since it is puling JS people into the TS land for just that feature. So it would need to be something like C.