`generatePageImport` error handling path variable of win32 style

[Gehbt]

I tried running the example on repo in windows, an warning occurred. And vite serve is broken.

By tracing, It seems by the root.insert call node variable __dirname. It will return win32 style path \\unplugin-vue-router\\ , and path.join function keep the style.

When it written to / __vue-router/auto-routes by generatePageImport, path is converted to \unplugin-vue-router\. That caused backslash escape error.

reproduction

https://github.com/Gehbt/uvr-bug-repo1

• go to vite.config.js
• change join function import source to node:path

[posva]

AFAIK shouldn’t this just work? Or maybe I could use the join from pathe

[Gehbt]

If the path as string, it can work, but it has been written to a file. Backslashes are transformed. For a Win32-style path, should prepare \\\\unplugin-vue-router\\\\.

[Gehbt]

By the example of playground

beforeWriteFiles(root) {
   root.insert('/from-root', join(__dirname, './src/pages/index.vue'))
}

In windows, __dirname like C:\\Users\\USERNAME\\unplugin-vue-router, the path.join follow the style.

Like '\n' be newLine, the generated code be:

"component: () => import('C:\Users\USERNAME\unplugin-vue-router\playground\src\pages\index.vue'"

the backslashes transform do wrong.

If kept the Win32-style path, the filepath should be transformed into a raw string.

'C:\\\\Users\\\\USERNAME\\\\unplugin-vue-router\\\\playground\\\\src\\\\pages\\\\index.vue'

[posva]

A reproduction will still help for this. I don't have a windows to test right now thought

[Gehbt]

OK, I will do.

[Gehbt]

A reproduction is provided

[pwang2]

Was using WSL previously, when switch to windows, get the same error. In the codegen part in windows, the backward slash "" here was unexpected and should be use double \ to escape.

[Update]:

I think I can target it now. it looks like the routeMapRecord need to use double escaped windows path.

Fix as below:
@posva , i think the root insert here can place the same handling.

basically, in line https://github.com/posva/unplugin-vue-router/blob/main/src/codegen/generateRouteRecords.ts#L108C1-L109C1, we need something like below visually to make it work, kinda confusing.

also, this is valid too in modern Windows.

[posva]

I don't have a windows machine but we have tests running through windows in CI, so it would be great if someone could at least open a PR with a failing test scenario

[cscnk52]

Maybe this is a better solution:

@@ -13,7 +12,7 @@ export default defineConfig({
       beforeWriteFiles: (root) => {
         root.insert(
           "/from-root",
-          join(__dirname, "./src/components/HelloWorld.vue")
+          new URL("./src/components/HelloWorld.vue", import.meta.url).pathname
           // ! ^^^^^^^^^  return backslash style path string. (in Windows)
         );
       },

node:path produces platform-dependent paths (\ on Windows, / on Unix).
Vite expect URL-style paths that always use /, especially for dynamic imports.
To avoid analysis errors, it’s better to avoid node:path inside Vite config and use new URL() instead.