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

[d2s]

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.)

[patrickgrey]

Hi @d2s I think I had a similar problem. After investigating, it looked like it may be an issue with node when fspromise.rename is used. I tried to document in this issue but closed it as I decided it wasn't related to the plugin itself: https://github.com/11ty/eleventy-plugin-vite/issues/4 I've still not found a solution to it I'm afraid.

[patrickgrey]

Sorry if this is the wrong place for this. I'm using this workaround to build.

_website-publish is my output directory and I passthroughcopy js, css and scss files to it in my eleventy script.

eleventyConfig.setServerPassthroughCopyBehavior("copy");
eleventyConfig.addPassthroughCopy("_website-source/**/*.js");
eleventyConfig.addPassthroughCopy("_website-source/**/*.css");
eleventyConfig.addPassthroughCopy("_website-source/**/*.scss");

I skip the vite plugin in production in my eleventy config:

if (process.env.NODE_ENV === "development") {
    eleventyConfig.addPlugin(EleventyVitePlugin, {
      tempFolderName: "_website-publish", // Default name of the temp folder
    });
}

I then run this script from package.json (needs npm-run-all installed)...

"build:11ty": "npx @11ty/eleventy",
"build:esbuild": "node _utilities/build.mjs",
"build": "run-s del build:11ty build:esbuild"

...to let ESBuild take care of building:

import { build } from "esbuild";
import glob from "fast-glob";
import { sassPlugin } from "esbuild-sass-plugin";

(async () => {
  let entryPointsJS = await glob(`_website-publish/**/*.js`);
  let entryPointsCSS = await glob(`_website-publish/**/*.css`);
  let entryPointsSCSS = await glob(`_website-publish/**/*.scss`);
  let entryPoints = [...entryPointsJS, ...entryPointsCSS, ...entryPointsSCSS];
  await build({
    allowOverwrite: true,
    bundle: true,
    entryPoints,
    minify: true,
    nodePaths: [`_website-publish/shared`],
    outdir: `_website-publish`,
    plugins: [sassPlugin()]
  });
})();

[zachleat]

Hmm—can y’all retest with the new v2.0.0 or v4.0.0 version of this plugin? Improvements have been made!

Though I should note that I’m a bit confused here. The 11ty-vite folder is created automatically for you and should be completely transparent to folks using this plugin

[groenroos]

@zachleat I still get the same error on version 4.0.0 of the plugin. Build will throw an error about a missing .11ty-vite directory, but serving works without errors. Let me know if you need more info.

[jenssimon]

Looks like I run into the same issue after adding the following line to my code:

<link rel="alternate" hreflang="{{lang}}" href="{{page.url}}">

Error is:

vite:config no config file found. +0ms
  vite:config using resolved config: {
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object], [Object] ]
  vite:config   },
  vite:config   clearScreen: false,
  vite:config   appType: 'mpa',
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     mode: 'development',
  vite:config     middlewareMode: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules],
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: '/path/to/project/_site',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: [Array] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     mode: 'production',
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   root: '/path/to/project/.11ty-vite',
  vite:config   configFile: undefined,
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     resolve: { alias: [Object] },
  vite:config     clearScreen: false,
  vite:config     appType: 'mpa',
  vite:config     server: { mode: 'development', middlewareMode: true },
  vite:config     build: {
  vite:config       mode: 'production',
  vite:config       rollupOptions: [Object],
  vite:config       outDir: '/path/to/project/_site'
  vite:config     },
  vite:config     root: '/path/to/project/.11ty-vite'
  vite:config   },
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/path/to/project/.11ty-vite/public',
  vite:config   cacheDir: '/path/to/project/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   css: undefined,
  vite:config   esbuild: { jsxDev: false },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/path/to/project/.11ty-vite',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(2) {
  vite:config     'fnpd_/path/to/project' => {
  vite:config       dir: '/path/to/project',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     'fnpd_/path/to/project/.11ty-vite' => {
  vite:config       dir: '/path/to/project/website',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { disabled: 'build', esbuildOptions: { preserveSymlinks: false } },
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:watch-package-data',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:worker-post',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +11ms
vite v4.5.0 building for production...
  vite:esbuild 28.04ms tsconfck init /path/to/project +0ms
✓ 0 modules transformed.
✓ built in 99ms
[vite:build-html] EISDIR: illegal operation on a directory, read
file: /path/to/project/.11ty-vite/foo/bar/index.html
[11ty] Encountered a Vite build error, restoring original Eleventy output to _site [Error: EISDIR: illegal operation on a directory, read] {
  errno: -21,
  code: 'PLUGIN_ERROR',
  syscall: 'read',
  pluginCode: 'EISDIR',
  plugin: 'vite:build-html',
  hook: 'transform',
  id: '/path/to/project/.11ty-vite/foo/bar/index.html',
  watchFiles: [
    <stripped>
  ]
}
[11ty] Problem writing Eleventy templates:
[11ty] ENOENT: no such file or directory, lstat '/path/to/project/.11ty-vite' (via Error)
  Eleventy:EleventyErrorHandler (error stack): Error: ENOENT: no such file or directory, lstat '/path/to/project/.11ty-vite' +0ms

Probably my problem is more specific. But could it be that the plugin swallows a Vite error?

[KiwiKilian]

@jenssimon your problem is that you probable have a relative path in the href of <link>. It should be a fully qualified URL (https://...).

If anybody would like to share a full reproduction, I'm happy to have a look. Closing for now until further information is given.

[groenroos]

Once Eleventy 3.0.0 is out of beta (and I'm assuming 5.0.0 of this plugin will release in tandem?), I can take another look and see if this still occurs in my project! 👍

[KiwiKilian]

@groenroos yes, once Eleventy v3 lands without beta this plugin should also see a full release. But you could already try now with the current pre-releases, they seem pretty good already...

[groenroos]

Yeah, Eleventy 3.0.0-beta.1 does seem pretty stable! However, on the Vite side we're actually migrating a large and complex project from Webpack to Vite, so unfortunately I don't think it's worth the headache to combine that with our Eleventy 3 upgrade (also complex because of ESM), until I can actually merge the Eleventy 3 upgrade properly (and I won't be allowed to do that until it's out of beta!).

Hopefully somebody else who encountered this issue with a smaller and/or less corporate project can check the pre-releases! 🤞

[groenroos]

@KiwiKilian Upgraded to Eleventy 3.0.0 finally, but running into this same issue with the Vite plugin 5.0.0 still - opened a new issue: #56

[KiwiKilian]

As noted in https://github.com/11ty/eleventy-plugin-vite/issues/56#issuecomment-2466227840, this is issue is probably not related. The reasoning for a missing temp folder can be differently.