Unable to bundle stylelint using bundlers

[phoenisx]

What steps are needed to reproduce the bug?

Use rollup to bundle this library. It fails

What Stylelint configuration is needed to reproduce the bug?

None

How did you run Stylelint?

I am trying to bundle stylelint in my project

Which version of Stylelint are you using?

14.14.0

What did you expect to happen?

Stylelint should get bundled, without any errors.

What actually happened?

Getting Could not dynamically require "./color-no-invalid-hex" when using color-no-invalid-hex in the project.

Does the bug relate to non-standard syntax?

None

Proposal to fix the bug

• PR that introduced dynamic requires in the stylelint: Standardise lazy requires #4729
• PR that fixed typings due to dynamic requires: Refactor to fix all type problems #5878

Since the latter does not use the import-lazy pattern for bundlers, bundlers are not able to resolve the require paths and fails during runtime.

Possible Resolution:

• We can keep the import-lazy pattern for bundlers intact, i.e. to revert back to using importLazy(() => require('./color-no-invalid-hex'))() pattern
• To fix usages of // @ts-nocheck, we can do something like following instead:

/** @type {(fn: () => any) => (() => any)} */
// @ts-ignore
const importLazy = require('import-lazy');
...
  'color-no-invalid-hex': importLazy(() => require('./color-no-invalid-hex'))(),

I am not sure how strict this project is in terms of using @ts-ignore comments, but I feel this is a decent trade-off to support proper bundling, unless someone has a better solution to overcome typescript type errors in rules module.

[ybiquitous]

@phoenisx Thanks for opening the issue and for using the template.

Your suggestion sounds good to me. Could you please provide a minimal reproduction repository using rollup?

[phoenisx]

Hi @ybiquitous
Thanks for the quick reply 🙇🏽

I created a repro for this issue here: https://github.com/phoenisx/stylelint-bundling-issue

You need to run the following commands to get to the reproduction:

pnpm build #use `npm` if you prefer
pnpm run-bundle

You will get the following error:

Failed to process:  Error: Could not dynamically require "./color-no-invalid-hex".
Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option
of @rollup/plugin-commonjs appropriately for this require call to work.

I have also tried adding dynamicRequireTargets, but with no success.

[ybiquitous]

@phoenisx Thank you for providing the reproduction with a detailed explanation! Converting the code to the following bundler-friendly pattern seems to make sense. 👍🏼

-	'alpha-value-notation': importLazy('./alpha-value-notation'),
+	'alpha-value-notation': importLazy(() => require('./alpha-value-notation'))(),

In addition, to avoid type errors, we need to apply the patch to the import-lazy type definition like this:

 declare function importLazy<T = unknown>(
 	importFn: (moduleId: string) => T
-): (moduleId: string) => T;
+): (moduleId?: string) => T;

Let's create and commit a patch by using the patch-package package.

---

I've labeled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

[phoenisx]

Thanks for the guidance. I can work on this and raise a fix later.

[phoenisx]

I have raised the PR. Do let me know if anything else is needed to resolve this issue 💯