Stuck with dev:prepare on a nuxt module when installing nuxt ui

[guirak]

Hello,

I have a monorepos nuxt project with a nuxt module based on Nuxt/UI.

Yesterday, I have runned my job that build the project for production and I'm encountering an issue when running the dev:prepare in my module that depends of Nuxt/UI : the task stay stuck.
Here is my module code :

[...]
export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "mmione-webui-fwk",
    configKey: "fwk"
  },
  defaults: {
    prefix: "Fwk"
  },


  async setup(options, nuxt) {

    const srcResolver = createResolver(import.meta.url);

    const runtimeDir = srcResolver.resolve("./runtime");
    const moduleDir = srcResolver.resolve("..");

    const modelConnectSrcDir = srcResolver.resolve(moduleDir, "../../models/mmi-model-connect/src");
    const modelOneSrcDir = srcResolver.resolve(moduleDir, "../../models/mmi-model-one/src");

    // Configuration de Tailwind CSS
    // @ts-ignore
    nuxt.hook("tailwindcss:config",
      (tailwindConfig: Partial<Config>) => configureTailwind(tailwindConfig, srcResolver));

    // Ajout du plugin du framework
    addPlugin({
      src: srcResolver.resolve(runtimeDir, "plugins", "plugin")
    });


    // Ajout des modules
    await installModule(modelConnectSrcDir);
    await installModule(modelOneSrcDir);
    await installModule("@pinia/nuxt");
    await installModule("@nuxt/ui", {
      safelistColors: ['primary', 'purple', 'green', 'red']
    });


    // Alias
    nuxt.options.alias["@mmiUIFwk"] = runtimeDir;

    // Ajout du css
    nuxt.options.css.push(srcResolver.resolve(runtimeDir, 'webui-fwk.css'))

    // Ajout des composants
    const componentsDirectories = getDirectoriesRecursively(path.join(runtimeDir, "components"));

    logger.info("Ajout des composants des répertoires : ", componentsDirectories);

    componentsDirectories.forEach(dir => {
      addComponentsDir({
        path: dir,
        prefix: options.prefix,
        global: options.global,
        watch: false
      });
    });

    // Ajout des layouts
    const layoutsDirectories = getDirectoriesRecursively(path.join(runtimeDir, "layouts"));

    logger.info("Ajout des layouts des répertoires : ", layoutsDirectories);

    layoutsDirectories.forEach(dir => {
      addComponentsDir({
        path: dir,
        prefix: options.prefix,
        global: options.global,
        watch: false
      });
    });

    // Ajout des composables
    const composableDirectories = getDirectoriesRecursively(path.join(runtimeDir, "composables"));
    logger.info("Ajout des composables des répertoires : ", composableDirectories);
    addImportsDir(composableDirectories);

    // Ajout des stores
    const storeDirectories = getDirectoriesRecursively(path.join(runtimeDir, "stores"));
    logger.info("Ajout des stores des répertoires : ", storeDirectories);
    addImportsDir(storeDirectories);

    [...]
  }
});

When disabling the installModule("@nuxt/ui", ...), the task doesn't stuck anymore and finish correctly, but this is not a solution as the module is not installed. It's very strange as when the stuck is present, then all the logs published after the installModule are visible. So it seems the problem is caused by something done in nuxt ui after the installation (maybe in a hook)

The environment that have the problem is based in a docker image node:21.7.1-slim, I use pnpm to install.
There is a new version of pnpm since yesterday and maybe can explain the problem as I haven't put restriction on the pnpm version to use. But I have tested forcing the old version (pnpm@8.15.7) and the problem is still present.

I don't encounter the problem when building without the docker environment even if I use the last pnpm version.

I have tested in old versions of my git repos (versions that was working well : 1 month ago and another that build correctly the 14th april) and I have the same problem on them now. I have versionned the package lock so it's seems not to be a dependency problem.

To summarize, the problem occurs only in the docker environment (which the source image has not changed) and is present since a date between the 14th and the 17th april. It's not related to dependencies as I have the pnpm lock file that as not changed and old code is encountering the problem and seems not be related to pnpm version as forcing the version to oldest don't solve the problem.

I understand that is a very specific problem and hard to found a root cause with these explanations but maybe someone can found in my code something bad written or can give me an explanation about what can cause a stuck when installModule("@nuxt/ui", ...) is present.

Thank you.

[guirak]

Looking forward, the stuck is caused by the hook :

nuxt.hook("tailwindcss:config",
      (tailwindConfig: Partial<Config>) => configureTailwind(tailwindConfig, srcResolver));

When disabling it, there is no stuck.

The configureTailwind method is doing the following to customize my project :

import type { Config } from "tailwindcss";
import { type Resolver } from "@nuxt/kit";
import plugin from 'tailwindcss/plugin';

/**
 * Configuration de tailwind pour le module
 * @param tailwindConfig Configuration de tailwind
 * @param srcResolver Resolver pour le répertoire src
 */
export const configureTailwind = (tailwindConfig: Partial<Config>, srcResolver: Resolver) => {
  const runtimeDir = srcResolver.resolve("./runtime");

  tailwindConfig.theme = tailwindConfig.theme || {};
  tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
  console.log('KGU', tailwindConfig.theme.extend)

  // tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
  console.log('KGU2', tailwindConfig.theme.extend)

  // @ts-ignore
  // tailwindConfig.theme.extend.colors["san-marino"] = {
  //   "50": "#f3f6fc",
  //   "100": "#e6edf8",
  //   "200": "#c7d8f0",
  //   "300": "#96b8e3",
  //   "400": "#5d93d3",
  //   "500": "#346caf",
  //   "600": "#285ca1",
  //   "700": "#224a82",
  //   "800": "#1f406d",
  //   "900": "#1f375b",
  //   "950": "#15233c"
  // };

  // Vérifiez si l'objet 'content' et la propriété 'files' existent, sinon créez-les
  // @ts-ignore
  tailwindConfig.content.files.push(srcResolver.resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"));

  // Safelist pour ne pas purger les couleurs qui sont utilisées dans les :ui des composants nuxt-ui dans le framework
  tailwindConfig.safelist = tailwindConfig.safelist || []
  tailwindConfig.safelist.push({
    pattern: /(bg|text|ring)-(.*)-(50|100|200|300|400|500|600|700|800|900|950)/,
  })
  tailwindConfig.safelist.push({
    pattern: /(top|bottom|left|right)-(.*)-(0.5|1|1.5|2)/,
  })
  tailwindConfig.safelist.push({
    pattern: /(grid-cols)-(1|2|3|4|5|6|7|8)/,
  })

  // Ajout des variantes portrait et landscape
  tailwindConfig.plugins = tailwindConfig.plugins || [];
  tailwindConfig.plugins.push(
    plugin(function({ addVariant }) {
      addVariant('portrait', '@media (orientation: portrait)');
      addVariant('landscape', '@media (orientation: landscape)');
    })
  );


  console.log('KGU10')
};

Commenting some part of code (about tailwindConfig.theme.extend.colors) as seen above, there is no more stuck but the following error at the end of the pnpm run dev:prepare task :

  ERROR  x Build failed in 2.58s


 ERROR  Nuxt Build Error: [vite:css] [postcss] Method RegExp.prototype.exec called on incompatible receiver [object RegExp]
file: /src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/tailwind.css:undefined:NaN

  at Proxy.exec (<anonymous>)
  at Proxy.test (<anonymous>)
  at registerPlugins (/src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/lib/lib/setupContextUtils.js:899:38)
  at createContext (/src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1221:5)
  at getContext (/src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1278:19)
  at /src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:118:81
  at /src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
  at plugins (/src/node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/lib/plugin.js:38:69)
  at LazyResult.runOnRoot (/src/node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:329:16)
  at LazyResult.runAsync (/src/node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:258:26)
  at LazyResult.async (/src/node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:160:30)
  at LazyResult.then (/src/node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:404:17)

I haven't changed anything about this tailwindConfig.ts file, this code was working 4 days ago.

[danielroe]

I think this is an upstream issue - and can be tracked in nuxt/ui or nuxt/tailwindcss. Happy to be tagged in either if Nuxt or the module builder end up being more involved. 🙏

[guirak]

Yes, the problem is finally caused by a new version of @nuxtjs/tailwindcss.

More details here : nuxt/ui#1689