fix: make vite-dev-server work on windows #16103
Conversation
|
Thanks for taking the time to open a PR!
|
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
| @@ -16,14 +18,18 @@ export const makeCypressPlugin = ( | |||
| ): Plugin => { | |||
| let base = '/' | |||
|
|
|||
| const posixSupportFilePath = supportFilePath ? resolve(projectRoot, supportFilePath).replace(OSSepRE, '/') : undefined | |||
|
|
|||
| const normalizedSupportFilePath = posixSupportFilePath ? `${base}@fs/${posixSupportFilePath}` : undefined | |||
There was a problem hiding this comment.
Out of curiosity where does this @fs come from? I've seen it before for the node_modules but never really understood it.
There was a problem hiding this comment.
I think I could use a function from vite to format those.
Let me dig a little deeper.
Overall it's an abstraction on the vite server to call on the file system.
If a module path starts with @fs/, return the file from the filesystem.
The server was returning the files just fine on Mac, but windows could not access them.
There was a problem hiding this comment.
The proper functions to condition file calls in Vite are not yet exposed.
See fileToUrl() in assets.ts.
Maybe we can get Vite to expose some kind of util library?
Until then its the only way since we have our HTML in the wrong place (within node_modules)
There was a problem hiding this comment.
All good, just curious - good to know this comes from Vite.
| return { | ||
| name: pluginName, | ||
| enforce: 'pre', | ||
| config (_, env) { | ||
| if (env) { | ||
| return { | ||
| define: { | ||
| 'import.meta.env.__cypress_supportPath': JSON.stringify(supportFilePath ? resolve(projectRoot, supportFilePath) : undefined), | ||
| 'import.meta.env.__cypress_supportPath': JSON.stringify(normalizedSupportFilePath), |
There was a problem hiding this comment.
What does JSON.stringify do here? Do we need it?
There was a problem hiding this comment.
Just like with webpack define plugin, the strings on the left are meant to be replaced in the code literally.
So if they contain any special character, I want it to be escaped automatically.
This way when they are eval-ed within the code, the special characters are kept.
I hope it is clear.
| @@ -40,7 +46,7 @@ export const makeCypressPlugin = ( | |||
| tag: 'script', | |||
| injectTo: 'body', | |||
| attrs: { type: 'module' }, | |||
| children: `import(${JSON.stringify(INIT_FILEPATH)})`, | |||
| children: `import(${JSON.stringify(`${base}@fs/${INIT_FILEPATH}`)})`, | |||
There was a problem hiding this comment.
I don't think we need JSON.stringify. I was able to remove something similar in webpack-dev-server.
There was a problem hiding this comment.
I am not sure you should have removed it from webpack-dev-server either.
Do test hard cases with special char in the folder name:
Oma's sister.The "Best" projectThe back\slash
In those cases we will end up with either an unterminated string or some characters that are removed from the string.
It is not my intention.
There was a problem hiding this comment.
Ooo ok. Maybe we should revert that change I made. :|
* develop: (49 commits) fix: `cy.type()` should not change the value attr of button-like inputs. (#16154) fix: properly detect `cy.intercept(url, routeMatcher, handler)` overload (#16167) fix: consider multiple routes when looking for aliases (#16180) fix: pass contextIsolation: true (#16165) chore: fix failing "should handle aborted requests" test (#16170) feat(issue-3741): added keyboard support for folder (#15648) fix(webpack-dev-server): remove hard dependency on html-webpack-plugin v4 (#16108) chore(deps): downgrade electron to v12.0.0-beta.14 (#16113) fix: accept absolute paths in vite dev server (#16148) fix: cy.then shows wrong type when collection of HTMLElement's is provided (#15869) fix: do not treat utf8 requests as binary (#15946) chore: fix types docs: fix broken links for @cypress/react example recipes (#15674) update circle yml ignore undefined beforeEach fix: make vite-dev-server work on windows (#16103) chore: add triple slash reference chore: remove conflicting types chore: rebuild yarn lock resolve conflicts in master(fe0b63c) and develop ...
User facing changelog
Before this PR loading the testing client did not work on Windows.
See issue.
Additional details
There was a bunch of backslashes mixed in the urls.
How has the user experience changed?
@cypress/vite-dev-server is now working on windows