eleventy-plugin-vite
eleventy-plugin-vite copied to clipboard
11ty
eleventy-plugin-vite fails to resolve import when used with `--pathprefix` and eleventy html base plugin
When deploying to gitlab pages (and locally), basically deploying to a subdir, I did not manage to get eleventy-plugin-vite working together with the eleventy build argument --pathprefix and the eleventy HTML base plugin:
$ npx eleventy --pathprefix=mysubdir
[vite]: Rollup failed to resolve import "/mysubdir/assets/app.js" from "/path/to/my/elventyreporoot/.11ty-vite/events/index.html".
My setup (simplified):
// eleventy.config.js
const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite");
const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
eleventyConfig.addPlugin(EleventyVitePlugin);
eleventyConfig.addPassthroughCopy('assets');
return {
dir: {
input: "src",
output: "_site"
},
}
}
# _includes/base.njk
<body>
<script type="module" src="{{ '/assets/app.js' }}"></script>
</body>
Do you happen to have a tip on where my error might be?
In another project I successfully use eleventy-plugin-base and parcel as an asset bundler with --pathprefix.
Here's a partial solution: don't use EleventyHtmlBasePlugin, and instead do this:
eleventyConfig.addPlugin(EleventyVitePlugin, {
viteOptions: { base: "/foo" },
})
This doesn't handle <a href>s, and it requires configuration in your .eleventy.js instead of on the command line, but it works well enough.
To make it work, you also have to remap your assets in the addPassThroughCopy and set the vite base as recommended by @Gaelan. This is what it could look like:
import EleventyVitePlugin from "../.eleventy.js";
import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy({
[`${eleventyConfig.directories.input}assets/`]: "mysubdir/assets/",
});
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
eleventyConfig.addPlugin(EleventyVitePlugin, {
viteOptions: {
base: "/mysubdir",
},
});
}
Called with:
npx @11ty/eleventy --pathprefix=mysubdir
After all, it might be easier to make this work completely though vite and not using the eleventy pathPrefix. As of now I can't see a way of making this work per default from the plugin. It needs carefull configuration by the user. If somebody has an idea, feel free to open a PR!
When https://github.com/11ty/eleventy/issues/3439 gets resolved, the workaround could at least be flexible and read the pathPrefix from the config.