search

11ty / eleventy-plugin-vite

A plugin to use Vite with Eleventy
134 stars 10 forks source link

Can't build - ENOENT on Mac, EPERM on Windows 😭 #4

Closed patrickgrey closed 2 years ago

patrickgrey commented 2 years ago

Hi, I can't get 11ty to build when the Vite plugin is included. I've created the most paired down example I can: https://github.com/patrickgrey/pg-11ty-vite-test-01

The repo will build without the vite plugin. Simply adding the plugin causes the build issues. I watched the release video but couldn't see the project structure to copy.

I'm using 11ty 2.0.0-canary.4 and vite plugin 1.0.0-canary.1

The development server works fine. When I build on Windows I get an EPERM error. When I build on Mac, I get an ENOENT error. The full error messages are in the README of the above test repo.

I'm wondering if there is some sort of race condition going on where vite and 11ty are trying to rename / access folders at the same time? Please let me know if there is any further testing I can do. Cheers.

simplerethink commented 2 years ago

@patrickgrey

Changing

<link rel="stylesheet" href="{{ './css/index.css' | url }}">

To

<link rel="stylesheet" href="{{ './css/index.css' }}">

Resolves the issue for me in my tests.

patrickgrey commented 2 years ago

Thanks @simplerethink but I'm afraid this doesn't make any difference for me, at least on Windows. I'll test on Mac. The question anyway would be why this would solve things? Appreciate you testing. Cheers.

patrickgrey commented 2 years ago

I finally took the time to look at the plugin code. I'm going to close this thread as the problem seems to be my environment and node so, nothing to do with 11ty. Basically trying fspromise.rename always results in an EPERM for me.

I understand most of the plugin code but one part has me stumped and I'd really appreciate an explanation if anyone has time.

EleventyVite.js has a runBuild method. Another directory is created to output the Vite build. I thought that the directory names were swapped so that build files end up in the expected 11ty output directory. It's the following code that confuses me:

await fsp.mkdir(tmp, { recursive: true });
await fsp.rename(this.outputDir, tmp);

Doesn't fsp.rename just change the name of outputDir to tmp and therefore overwrite the tmp dir? Does this somehow swap the names? I can't find an answer in node documentation. Sorry if I'm being ignorant here - I'm not experienced with node. Cheers, Patrick