[bug] importing a plugin makes @roots/bud-tailwindcss fail

[LucasDemea]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

Whenever I try to make an ESM import in tailwind.config.mjs or tailwind.config.mts, I get an error with most of bud cli commands (doctor, build...).

Expected Behavior

The command works.

Actual Behavior

error Command failed with exit code 1.

Steps To Reproduce

1. composer create-project roots/sage sage
2. import a module in tailwind.config.js
3. yarn bud doctor

version

6.16.1

Logs

ExtensionError 

✘ Invalid regular expression: /k4g9CK9US2agURHSChH++PqSnnaIGjJnjiyLsV/S/: Nothing to repeat

… Thrown by  @roots/bud-tailwindcss

→ Documentation https://bud.js.org/docs/extensions

⌂ Originating error 
│ Invalid regular expression: /k4g9CK9US2agURHSChH++PqSnnaIGjJnjiyLsV/S/: Nothing to repeat
│
│ BudError: Invalid regular expression: /k4g9CK9US2agURHSChH++PqSnnaIGjJnjiyLsV/S/: Nothing to repeat
│     at BudTailwindCss.catch (file:///my-project/sage/node_modules/@root
│ s/bud-framework/lib/extension/index.js:93:30)
│     at async BudTailwindCss._register (file:///my-project/sage/node_mod
│ ules/@roots/bud-framework/lib/extension/index.js:290:9)
│     at async Extensions.run (file:///my-project/sage/node_modules/@root
│ s/bud-extensions/lib/service/index.js:285:17)
│     at async file:///my-project/sage/node_modules/@roots/bud-extensions
│ /lib/service/index.js:299:13
│     at async file:///my-project/sage/node_modules/@roots/bud-extensions
│ /lib/service/index.js:298:13
│     at async file:///my-project/sage/node_modules/@roots/bud-extensions
│ /lib/service/index.js:298:13
│     at async file:///my-project/sage/node_modules/@roots/bud-extensions
│ /lib/service/index.js:298:13
│     at async file:///my-project/sage/node_modules/@roots/bud-extensions
│ /lib/service/index.js:298:13
│     at async file:///my-project/sage/node_modules/@roots/bud-extensions
│ /lib/service/index.js:298:13

error Command failed with exit code 1.

Configuration

import colors from './build/colors';

const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: colors, // Extend Tailwind's default colors
    },
  },
  plugins: [],
};

export default config;

Relevant .budfiles

No response

[retlehs]

ESM imports within a Tailwind config are properly supported by bud

This issue is missing all of the relevant details needed to create a reproduction of your bug

Either post on https://discourse.roots.io/ for support, or provide everything required to reproduce your issue

[kellymears]

In ESM you have to import with the file extension.

This is incorrect:

import colors from './build/colors';

This is correct:

import colors from './build/colors.js'; // or .mjs or .cjs, whatever

That said, I would expect the error to read more like this:

❯ yarn bud --basedir examples/tailwindcss build
[@examples/tailwindcss] [@roots/bud-tailwindcss] › ✖  Error [ERR_MODULE_NOT_FOUND]: Cannot find module '[secure]/examples/tailwindcss/colors' imported from [secure]/examples/tailwindcss/tailwind.config.js
Did you mean to import ../colors.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:224:11)
    at moduleResolve (node:internal/modules/esm/resolve:837:10)
    at defaultResolve (node:internal/modules/esm/resolve:1035:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:269:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:153:32)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
    at link (node:internal/modules/esm/module_job:75:36)

I can't reproduce the error you're experiencing beyond that.

[LucasDemea]

I tried importing path including files extensions, but it didn't work either. I'll post a minimal repro repo soon

[LucasDemea]

Here you can find a minimal repro : https://github.com/LucasDemea/bud-tw-import-bug/
In this sage based repo, I added some bud extensions, a tsconfig.json, and an import in tailwind.config.js.

Actually, i'm not sure the bug is related to the import in taiwind config, and it it kind of flaky. I tried to debug it during 2/3 days but I couldn't find the reason with certitude.
It might be related to bud extensions registration.
I also happened to get another more explicit log, related to signale.js, but I can't reproduce the conditions to make it happen again. I'll update if it happens again.

[LucasDemea]

Ok, nevermind, I confused myself with my config system, sorry.
Still this Invalid regular expression: /k4g9CK9US2agURHSChH++PqSnnaIGjJnjiyLsV/S/: Nothing to repeat error is not really explicit about what's going on.