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

[guirak]

Environment

• Docker image node:21.7.1-slim
• pnpm 8.15.7 and 9.0.2
• nuxt/ui : 2.15.2
• nuxt : 3.11.2

Version

2.15.2

Reproduction

https://github.com/guirak/NuxtUi_TailwindColorStuck

Description

Hello,

I have first created the issue here but after investigation, it seems to be a better place in the @nuxt/ui repository

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 hook tailwindcss, the task doesn't stuck anymore and finish correctly.

Looking forward, the problem is caused by the assignment of the tailwindConfig.theme.extend.colors done in the function called by the hook :

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 || {};
  tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};

  // @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)');
    })
  );
};

Commenting all the codes that concern the tailwindConfig.theme.extend.colors, 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/[email protected]/node_modules/tailwindcss/tailwind.css:undefined:NaN

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

Commenting the hook, there is no more problem and all is building correctly

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

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 ([email protected]) 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 commits 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 versioned 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 the assignment of tailwindConfig.theme.extend.colors is causing the stuck.

Thank you.

Additional context

No response

Logs

No response

[Sandros94]

@ineshbose could I ask your opinion on this? Isn't it related to the recent tailwind's module changes?

[guirak]

Hello,

Yes it seems to be the problem, I have tested forcing the old version :

  "pnpm": {
    "overrides": {
      "@nuxtjs/tailwindcss": "6.11.4"
    }
  },

And it's working well ! :)

This change has impacted all my git historical. Olds version and prod versions was not building anymore without changing the version of Nuxt/UI dependencies.
The explanation that what it was working locally but not in Docker was the presence of the pnpm-lock.yaml in my docker ignore. :X

[ineshbose]

Hi! Yes this will likely be due to changes in 6.12.0 - so I'll be pushing a fix for it in 6.12.1, but would ask you to downgrade for now as you have!

May I ask your use-case here, i.e, are you authoring a module or is it a module within your project?

In any case, safelist regexes and tailwind plugins shouldn't be passed from the hook, and you should use a separate config file for that. Depending on your use case there are multiple approaches to do this, but first #1665 would need merging!

[guirak]

Hi ineshbose,

Yes, staying in 6.11.4 it's a good workaround for me.

It's a module within my project. I have decomposed the project in several nuxt module to be reusable by several apps. One of them is considered as the graphical framework. It is direct dependent to nuxt ui and provide all the components, composable and configuration for all the apps of the project.

I have put inside the configuration of tailwind to avoid to repeat it on all apps.
Thanks to this issue, I have modified how I define this configuration since last day. Now I'm defining a tailwind.config.ts and an app.config.ts files in the graphical framework module and link to them in the app :

// tailwind.config.ts in apps
import {webuiTailwindConfig} from "../../ui/mmione-webui-fwk/src/runtime/config/tailwind.config"
export default webuiTailwindConfig

// app.config.ts in apps
import {webuiAppConfig} from "@mmiUIFwk/config/app.config"
export default webuiAppConfig

[ineshbose]

Hi ineshbose,

Yes, staying in 6.11.4 it's a good workaround for me.

It's a module within my project. I have decomposed the project in several nuxt module to be reusable by several apps. One of them is considered as the graphical framework. It is direct dependent to nuxt ui and provide all the components, composable and configuration for all the apps of the project.

I have put inside the configuration of tailwind to avoid to repeat it on all apps. Thanks to this issue, I have modified how I define this configuration since last day. Now I'm defining a tailwind.config.ts and an app.config.ts files in the graphical framework module and link to them in the app :

// tailwind.config.ts in apps
import {webuiTailwindConfig} from "../../ui/mmione-webui-fwk/src/runtime/config/tailwind.config"
export default webuiTailwindConfig

// app.config.ts in apps
import {webuiAppConfig} from "@mmiUIFwk/config/app.config"
export default webuiAppConfig

Should consider using layers!