Plugin breaks Playwright tests with Vite preview server due to "accepts" header rules

[james-camilleri]

This is a bit of a weird one, but I'm pretty sure I've narrowed down the cause.

Symptoms
Playwright tests running on a vite preview server fail to start. Playwright is unable to detect that that the server is running.

Probable cause
Playwright sends a GET request with an Accepts: */* header to the configured URL to determine if the server is running. This plugin overwrites the default headers accepted for rewrites by the connect-history-api-fallback module here:

vite-plugin-virtual-mpa/src/plugin.ts

Line 110 in 5aed389

htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],

Since */* is no longer a valid header for a rewrite, Playwright's requests are never handled, and it can never tell that the server is running.

Possible solution
Add */* to the accepted headers, or reinstate the default ones. If that would break things, perhaps make them configurable somehow. I'm not sure what the context was behind changing the defaults initially so I'm not sure what the best solution is in this scenario.

[emosheeep]

*/* will redirect all of paths(such as assets) to html file which causes a blank page. Download the repo and start the example project, you'll find the reason.

[james-camilleri]

Oh that makes sense, silly of me not to think of it. I suppose adding a "dummy" page for the test URL wouldn't work, as that would end up getting added to the final built assets. Manually overriding the rewrite rules to cater for the test URLs also wouldn't work because the request would still go through connect-history-api-fallback and be filtered out the same way.

Could some variation of the browser index.html fallback logic be used perhaps, where if an explicit file is requested (e.g. src/pages/home/index.js the path is passed on to the rewriter unaltered, but if it's just an open url /pages/apple it gets re-interpreted as an html file?

I didn't notice the example folder app in the source code, let me try play around with it and see if I can think of anything that might handle this scenario without breaking functionality or doing something hacky.

[james-camilleri]

So disabling the header override and updating the rewrite rule to this seems to work, but I haven't exhaustively tested all the config options with it.

new RegExp(
  normalizePath(
    `/${base}/(${Object.keys(inputMap)
    .sort((a, b) => b.length - a.length)
    .join('|')})`,
  ) + '(\\.html?|$)' // ensures an overwrite is only carried out on paths that end in .html, .htm, or the end of string
);

Perhaps a basic set of playwright tests that would load a few different configs and check that the paths were all accessible as intended might be good to avoid regressions?

[emosheeep]

Maybe you can customize a rewrite rule across rewrites field🤔

[james-camilleri]

That would still require htmlAcceptHeaders to be adjustable or reverted to the defaults though, since it's hard-coded to ['text/html', 'application/xhtml+xml'] right now.

[emosheeep]

Could you please provide a minimal reproduction on stackblitz?

[james-camilleri]

Stackblitz might be slightly difficult because Playwright needs to install external browsers to run, however I have forked the repository and set up a minimal repo with the existing example on this branch: https://github.com/james-camilleri/vite-plugin-virtual-mpa/tree/issue-reproduction

There's an open PR just to show what files have been changed, for context:
https://github.com/emosheeep/vite-plugin-virtual-mpa/pull/80/files

The issue is specifically with the URL fallback, as explained in this part pf the playwright config:
https://github.com/emosheeep/vite-plugin-virtual-mpa/pull/80/files

If a route exists at / and Playwright attempts to access /anything-really the redirect rule doesn't kick in, although it does on the browser because of the Accepts header.

[james-camilleri]

I've found a not-too-hacky workaround for my use-case since hitting this issue, and given that it seems to be quite an edge case it might not be worth trying to fix.