eleventy-plugin-vite icon indicating copy to clipboard operation
eleventy-plugin-vite copied to clipboard

Build warning if `.11ty-vite` directory is missing

Open d2s opened this issue 1 year ago • 5 comments

For new users there should be a more clear error/warning message if the default .11ty-vite temporary directory is missing.

Build output from a website project with the latest Eleventy canary version v2.0.0-canary.14 and the latest @11ty/eleventy-plugin-vite plugin version 1.0.0.

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] ENOENT: no such file or directory, stat '/home/d2s/.../website/.11ty-vite' (via Error)
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '/home/d2s/.../website/.11ty-vite'
[11ty] Copied 60 files / Wrote 7 files in 0.53 seconds (v2.0.0-canary.14)
transforming (1) now/index.html

On the official documentation there is a way to change the tempFolderName, so it might be a good to change the potential error message based on that.

tempFolderName: ".11ty-vite", // Default name of the temp folder

Better error message might be similar to the following:

Consider adding .11ty-vite directory for the eleventy-plugin-vite to work properly.

Another option would be for the plugin to automatically try to create the directory, as it is a temporary directory that normal users shouldn't have to manually create.

Workaround for the "no such file or directory" error was to manually create an empty directory .11ty-vite that made the warning partly go away, but it didn’t fix the overall problem. But it seems that directory is removed on the second build run, so that workaround doesn't help for that long...


Edit:

Vite parsing errors

On the closer look, error seems to be happening after customized "HTML5 Test Page" source file can't be processed by Vite.

Source code of the html5-test-page.njk file: https://gist.github.com/d2s/00587aa2f69157415e0434b20cd52ea4

Local build error message in more detail:

file: /home/d2s/.../website/.11ty-vite/test/html5-test-page/index.html
[11ty] Encountered a Vite build error, restoring original Eleventy output to dist Error: Unable to parse HTML; 24
 at {"file":"/home/d2s/.../website/.11ty-vite/test/html5-test-page/index.html","line":7,"column":8204}

And more errors:

    at handleParseError (/home/d2s/.../website/node_modules/vite/dist/node/chunks/dep-689425f3.js:36434:11)
    at traverseHtml (/home/d2s/.../website/node_modules/vite/dist/node/chunks/dep-689425f3.js:36390:9)
    at async Object.transform (/home/d2s/.../website/node_modules/vite/dist/node/chunks/dep-689425f3.js:36467:17)
    at async transform (/home/d2s/.../website/node_modules/rollup/dist/shared/rollup.js:22042:16)
    at async ModuleLoader.addModuleSource (/home/d2s/.../website/node_modules/rollup/dist/shared/rollup.js:22267:30) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite:build-html',
  hook: 'transform',
  id: '/home/d2s/.../website/.11ty-vite/test/html5-test-page/index.html',
  watchFiles: [
    '/home/d2s/.../website/.11ty-vite/test/html5-test-page/index.html',
    '...',
  ]
}

Attempts to solve the build issues

Moved the failing files (the previously mentioned, and another discovered after that) away from the website directory to see if the build would work without those. New kinds of errors happened...

vite v2.9.15 building for production...
✓ 0 modules transformed.
[vite:build-html] EISDIR: illegal operation on a directory, read
file: /home/d2s/.../website/.11ty-vite/index.html
[11ty] Encountered a Vite build error, restoring original Eleventy output to dist [Error: EISDIR: illegal operation on a directory, read] {
  errno: -21,
  code: 'PLUGIN_ERROR',
  syscall: 'read',
  pluginCode: 'EISDIR',
  plugin: 'vite:build-html',
  hook: 'transform',
  id: '/home/d2s/.../website/.11ty-vite/index.html',
  watchFiles: [
    '/home/d2s/.../website/.11ty-vite/index.html',
    '/home/d2s/.../website/.11ty-vite/404.html',
    '...'
  ]
}
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] ENOENT: no such file or directory, stat '/home/d2s/.../website/.11ty-vite' (via Error)
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat '/home/d2s/.../website/.11ty-vite'
[11ty] Copied 60 files / Wrote 5 files in 0.52 seconds (v2.0.0-canary.14)

Kind of feeling that the initial user experience of the Vite integration is still in need of additional improvements. Tried to use this plugin before last month, but had to revert to previous setup without Vite (for similar reasons). Now had the extra time to document the failing build. (This is a reasonably simple personal site, so nothing critical, but it still took a few hours of my time trying to figure out why things aren't working as expected.)

d2s avatar Aug 18 '22 13:08 d2s