Vite not bundling properly JInja2 project

Question

I'm building a static-generated (SSG) landing page with Vite + Jinja2. I've made a plugin to parse the .html files written in Jinja2 and that works fine during development.

However during build, the javascript files included in base.html are totally missing. Namely it seems that Vite simply runs the Jinja2 parsing and outputs the result without running the bundling against the generated content, so I end up with something like below.

project:

src
 ├── base.html (includes all js)
 ├── index.html (extends base)
 └── js
     ├── main.js
     └── mail.js

bundle output:

dist
 └── index.html

bundled index.html:

<!doctype html>
<html lang="en">
  <head>
    <script type="module" src="./js/main.js"></script>
    <script type="module" src="./js/mail.js"></script>
    ..

My plugin (vite.config.js):

// Parse HTML files written in Jinja2 syntax
const htmlJinja2Parse = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html) {
      try {
        const modifiedHtml = execSync('python jinja2parse.py', {
          input: html,
          encoding: 'utf-8',
        });
        return modifiedHtml;
      } catch (error) {
        console.error('Failed to execute the Python script:', error);
        return html; // Return the original HTML in case of an error
      }
    },
  }
}


export default defineConfig(({ mode }) => {
  return {
    ..
    build: {
      outDir: path.resolve(__dirname, 'dist'),
      emptyOutDir: true,
      rollupOptions: {
        input: {
          // Specify all HTML files to build
          main: "./src/index.html",
        },
      },
    },
    plugins: [
      htmlJinja2Parse(),
    ]
  }
});

Any ideas why Vite skips bundling the generated content? Help much appreciated

Vite not bundling properly JInja2 project

0 Answers0