Crash on Windows

[chengpeiquan]

Previous steps:

pnpm create vocs
cd vocs-demo
pnpm i
pnpm dev

Everything works fine up to here.

But when I open it in the browser (http://localhost:5173/) , file loading failure occurs. It seems to be caused by a slash problem in Windows.

I tried to provide a reproducible demo, but the online example of stackblitz doesn't seem to run from Windows.

• https://stackblitz.com/~/github.com/chengpeiquan/vocs-demo
• https://github.com/chengpeiquan/vocs-demo

[chengpeiquan]

Tried it on my MacBook at home tonight and everything worked fine.
Since I use Windows at work during the day and only use macOS at home at night, I will continue to handle this problem during my lunch break at the company and try to help fix it.

[tmm]

That would be great! I don't have a Windows computer so would love to have a PR for this.

[dalechyn]

Hello, we faced the same issue on a Windows machine, tried to debug with no luck.

Similar issues: storybookjs/builder-vite#586, davidmyersdev/vite-plugin-node-polyfills#29

[chengpeiquan]

Hello, we faced the same issue on a Windows machine, tried to debug with no luck.

Similar issues: storybookjs/builder-vite#586, davidmyersdev/vite-plugin-node-polyfills#29

I try to solve this problem in my free time, but the progress is currently slow (it is now before the Chinese New Year, and I am quite busy at work).

The most difficult problem for me at the moment is that I cannot recognize the file path pointed to in the virtual module, although the path is correct, but a similar crash problem still exists.

I also tried the solution mentioned in the Storybook issue, but it didn't work.

I will continue to try to find the cause of this problem when I'm on vacation in a few days.

[klepto]

In this specific case, the problem is caused by using resolve from node:path module to generate imports in vite/plugins/virtual-styles.ts:

const themeStyles = resolve(__dirname, '../.vocs/themez.css')
const rootStyles = resolve(rootDir, 'styles.css')
let code = ''
if (existsSync(themeStyles)) code += `import "${themeStyles}";`
if (existsSync(rootStyles)) code += `import "${rootStyles}";`

The node:path module uses platform specific implementation, which means on Windows, it will produce paths with \ as the default separator, this ends up being incorrect import syntax hence the error.

Now as so happens Windows actually supports both separators equally, so any path using posix / separator is just as valid on Windows, which makes dependencies like https://www.npmjs.com/package/upath an easy drop-in solution.

You can of course try to address pathing problems individually without any external dependencies, but this most likely isn't the only instance where pathing issues exist. Fixing this specific case allowed my project to build, but the page still wasn't rendering properly.

I couldn't propose a PR request for this because I can't build vocs on Windows machine due to some dependencies not supporting Windows.

Looking forward to a fix! 😊

[klepto]

@tmm ^

[tmm]

Feel free to submit a PR. I don't use Windows so I'm probably not the best person to work on this.

[chengpeiquan]

In this specific case, the problem is caused by using resolve from node:path module to generate imports in vite/plugins/virtual-styles.ts:

const themeStyles = resolve(__dirname, '../.vocs/themez.css')
const rootStyles = resolve(rootDir, 'styles.css')
let code = ''
if (existsSync(themeStyles)) code += `import "${themeStyles}";`
if (existsSync(rootStyles)) code += `import "${rootStyles}";`

The node:path module uses platform specific implementation, which means on Windows, it will produce paths with \ as the default separator, this ends up being incorrect import syntax hence the error.

Now as so happens Windows actually supports both separators equally, so any path using posix / separator is just as valid on Windows, which makes dependencies like https://www.npmjs.com/package/upath an easy drop-in solution.

You can of course try to address pathing problems individually without any external dependencies, but this most likely isn't the only instance where pathing issues exist. Fixing this specific case allowed my project to build, but the page still wasn't rendering properly.

I couldn't propose a PR request for this because I can't build vocs on Windows machine due to some dependencies not supporting Windows.

Looking forward to a fix! 😊

I created a PR that fixed most of the crashes. See: #128

[chengpeiquan]

Hello, we faced the same issue on a Windows machine, tried to debug with no luck.

Similar issues: storybookjs/builder-vite#586, davidmyersdev/vite-plugin-node-polyfills#29

I created a PR that fixed most of the crashes. See: #128