Integrating Vite onto a Hugo site - abundant parse5 errors & a path question

[Arad1el]

I'm currently trying to streamline my process by integrating Vite into my existing Hugo site, so that I can develop my React integrations without needing to do them in a different repo and manually copy them across.

All is going well when running in development mode, but I've got a couple of issues:

1. When running in build mode I get so many "parse5 error code missing-whitespace-between-attributes" errors.

As a particularly annoying example, Hugo is compiling an HTML page so that it has an inline SVG, and then when Vite is running over the top of it, it's throwing that "missing whitespace" error

I've fiddled around with it a lot - initially I thought that it was complaining because it declared "stroke-width" instead of "strokeWidth" and it was trying to parse it like a jsx file, but even if I remove those attributes completely it still throws the same error.

Since I'm still a Hugo/Node/React/Vite newbie, I didn't want to raise it as a bug, as I'm not sure what to blame - is it the React plugin (I don't think so, because if I disable it in the config the issue still happens)

Is there a way to get Vite to ignore these issues, as they are invalid & I don't really care for those instances?

---

2. To resolve the issue, I instead set the entry point (through a plugin that changes the rollupoptions.input value) to be only the folder where I currently have a react app (though this would only be a temporary fix, as I intend to have more in different folders later on)

Whilst that does appear to work (as in, I don't get any errors) the path it constructs seems utterly mad

My repo is currently cloned to C:\Users\USERNAME\Documents\Website\website
So the app folder is structured like so:

└── assets
    ├── img (for general images on the site)
    ├── js
         ├──appname
              ├──assets
              ├──components
              ├──data
              ├──store
              ├──app.scss
              └──app.tsx
          └──appname.tsx
    └── scss (for general scss on the site)

If I run a successful build, the output folder structure is the following

└── assets
    ├── _
        └── Users
               └── USERNAME
                   └── Documents
                       └── Website
                           └── website
                               └── public
                                   └── entrypoint
                                       └── subfolder
                                           └── index.html-hash.js
    ├── compiled image assets from the app
    └── compiled css file from the app

Why does it resolve the non-JavaScript assets to a sensible location, but put the JavaScript file so many folders deep? Is there something I can configure to make this more reasonable?

[Arad1el]

I've managed to solve the second issue by changing the vite.config.ts to explicitly change the rollup options, but the first issue still persists:

export default defineConfig({
    plugins: [
        react(), // Specify preact plugin, we will need that later
        hugoPlugin({hugoOutDir, appDir}) // Hugo plugin that configures vite to work with hugo
    ],
    server: {
        port: 3000
    },
    build: {
        rollupOptions: {
            output: {
                entryFileNames: 'assets/[hash].js',
                dir: "public"
            }
        }
    }    
});

[Arad1el]

I eventually managed to figure it out - though the Vite output was complaining about line 216 of the specific file, the issue was actually on line 210. Once I solved that, everything built correctly.