search

11ty / eleventy-plugin-vite

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

eleventy-plugin-vite fails to resolve import when used with `--pathprefix` and eleventy html base plugin #27

Open tombreit opened 1 year ago

tombreit commented 1 year ago

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.

Gaelan commented 1 year ago

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.