Skip to content

Quasar (Vite) | Error on startup: "Hook is not a function" #3357

@xSavior-of-God

Description

@xSavior-of-God

UnoCSS version

v0.57.6

Describe the bug

Hello,
I have a problem with Unocss and Quasar, the Unocss plugins gives me and error related to the hook...

When starting the dev server ('quasar dev') this error appears.

image

After various tests I discovered that it's fault of the UnoCSS plugin which returns "undefined" instead of the "transform()" function, the error is caused by the "resolveHtmlTransforms" function that require the function "transform" inside the "transformIndexHtml" if is an object or just transformIndexHtml as function.

...node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:36775:27

function resolveHtmlTransforms(plugins) {
    const preHooks = [];
    const postHooks = [];
    for (const plugin of plugins) {
        const hook = plugin.transformIndexHtml;
        if (hook) {
            if (typeof hook === 'function') {
                postHooks.push(hook);
            }
            else if (hook.enforce === 'pre') {
                preHooks.push(hook.transform);
            }
            else {
                postHooks.push(hook.transform);
            }
        }
    }
    return [preHooks, postHooks];
}
async function applyHtmlTransforms(html, hooks, ctx) {
    const headTags = [];
    const headPrependTags = [];
    const bodyTags = [];
    const bodyPrependTags = [];
    for (const hook of hooks) {
        const res = await hook(html, ctx);
        if (!res) {
            continue;
        }

Currently I did a work around for my project... and it works now, but this for sure is not the correct way to fix this bug/error and idk how many other unknown issues it can cause...

...quasar.config.js

      // extendViteConf (viteConf) {},
      extendViteConf(config) {
        let _UnoCSS = UnoCSS.default({
          onlyGlobal: true,
          presets: [
            presetUno(),
            presetAttributify(),
            presetIcons({
              scale: 1.2,
              cdn: 'https://esm.sh/',
            }),
          ],
        });
        for(let plugin of _UnoCSS) {
          if(plugin && plugin.transformIndexHtml) {
            plugin.transformIndexHtml.enforce = 'pre';
            plugin.transformIndexHtml.transform = function(){};
          }
        }
        config.plugins.push(..._UnoCSS);
      },

Reproduction

To reproduce the problem, just run the official UnoCSS with Quasar example on GitHub via Stackblitz.

Open in StackBlitz

System Info

NodeJS: v18.18.0
NPM: v9.4.2
System: Windows 10/11
Browser: Edge & Chrome
Framework: Quasar CLI (with Vite)
Quasar: v2.14.0
Vue: v3.3.8

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions