Open d2s opened 1 year ago
patrickgrey
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago 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
commented
8 months ago @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
commented
7 months ago 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' +0msProbably my problem is more specific. But could it be that the plugin swallows a Vite error?
For new users there should be a more clear error/warning message if the default
.11ty-vitetemporary directory is missing.Build output from a website project with the latest Eleventy canary version
v2.0.0-canary.14and the latest@11ty/eleventy-plugin-viteplugin version1.0.0.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.Better error message might be similar to the following:
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-vitethat 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.njkfile: https://gist.github.com/d2s/00587aa2f69157415e0434b20cd52ea4Local build error message in more detail:
And more errors:
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...
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.)