Fix ERR_REQUIRE_ESM when importing ESM config with .js

[rakleed]

Describe the documentation issue

I don't know what the syntax for stylelint.config.js should be since all the examples are for .stylelintrc only. But ok, I found in the documentation of other linters that I can use module.exports = {} for CJS, but what is the syntax for ESM? I tried export default {} and export config = {} but it didn't work as there was always an Error [ERR_REQUIRE_ESM]: require() of ES Module error in the console even in version 16.

What solution would you like to see?

In https://stylelint.io/user-guide/configure it is worth adding at least one example of what the syntax of the stylelint.config.js file should look like for CJS and ESM.

[newives]

may be related to this cosmiconfig/cosmiconfig#312

[ybiquitous]

@rakleed Thanks for the feedback. We can reproduce the error as follows:

package.json (see type: module):

{
  "type": "module",
  "dependencies": {
    "stylelint": "16.0.0-0"
  },
  "scripts": {
    "test": "echo \"a{}\" | stylelint"
  }
}

stylelint.config.js:

export default {
  rules: {
    'block-no-empty': true
  }
};

Run:

$ npm t

> test
> echo "a{}" | stylelint

Error [ERR_REQUIRE_ESM]: require() of ES Module /private/tmp/stylelint-issue-7322/stylelint.config.js from /private/tmp/stylelint-issue-7322/node_modules/cosmiconfig/dist/loaders.js not supported.
Instead change the require of stylelint.config.js in /private/tmp/stylelint-issue-7322/node_modules/cosmiconfig/dist/loaders.js to a dynamic import() which is available in all CommonJS modules.
    at module.exports (/private/tmp/stylelint-issue-7322/node_modules/import-fresh/index.js:32:59)
    at Object.loadJsSync (/private/tmp/stylelint-issue-7322/node_modules/cosmiconfig/dist/loaders.js:17:12)
    at .js (file:///private/tmp/stylelint-issue-7322/node_modules/stylelint/lib/getConfigForFile.mjs:56:76)
    at #loadConfiguration (/private/tmp/stylelint-issue-7322/node_modules/cosmiconfig/dist/Explorer.js:92:30)
    at #readConfiguration (/private/tmp/stylelint-issue-7322/node_modules/cosmiconfig/dist/Explorer.js:77:80)
    at async search (/private/tmp/stylelint-issue-7322/node_modules/cosmiconfig/dist/Explorer.js:44:40)

If renaming .stylelint.config.js to .stylelint.config.mjs, this error doesn't occur.

$ npm t

> test
> echo "a{}" | stylelint


<input css MB9gWz>
 1:2  ✖  Unexpected empty block  block-no-empty

1 problem (1 error, 0 warnings)

This cause is the following code. This code has been added with PR #6902 as a workaround for segmentation fault errors.

stylelint/lib/getConfigForFile.mjs

Line 56 in 5110fd3

'.js': (jsPath, cjsContent) => Promise.resolve(defaultLoadersSync['.js'](jsPath, cjsContent)),

We must investigate if the code is still needed.

[ybiquitous]

The error is caused by the old workaround for segfault. PR #7329 should resolve this problem.

[rakleed]

@ybiquitous but I still would like the documentation to provide examples or indicate exactly how to export an object if a config is used in the form of a js file.

For example, eslint is moving to a flat config, so they have a separate syntax description for the new config and for the old one. And in the Prttier documentation, opposite the file format, it is indicated what and how to export.

[jeddy3]

We can include an update to the docs as part of this fix. It'll likely be something similar to Prettier's, rather than ESLint's, as the only difference between the files is how the configuration object is exported:

export default {};
module.exports = {};

(When we move to a flat config, we'll move completely to that because we don't have the same resources as ESLint to support both syntaxes side-by-side for a major version or two.)

[ybiquitous]

I've just opened PR #7334 to improve the user guide.

[newives]

@ybiquitous Hey, can you send a beta version so we can test it?

[ybiquitous]

Thanks for the reminder. I'll publish a new next version immediately. 👍🏼

[ybiquitous]

@newives https://github.com/stylelint/stylelint/releases/tag/16.0.0-1 is out. Can you see the new version and give us feedback if you prefer? Thanks.

[newives]

I am very happy that export default {} is no problem.
At present, there are only some community plug-ins left that are upgraded and compatible.

[newives]

I have confirmed that export default {} is fully available

But it was hindered by the stylelint-scss plug-in. Has rejected been deleted in stylelint?

[newives]

If rejected is deleted from ruleMessages, can mention it so that you can make corresponding modifications when stylelint-scss is upgraded to stylelintV16 ❤️

[ybiquitous]

@newives ruleMessages.rejected is owned by stylelint-scss, not stylelint. Perhaps, the change that stylelint.rules becomes Promise-based may affect: 🤔

stylelint/docs/migration-guide/to-16.md

Lines 82 to 89 in 7b77d41

	## Changed Node.js API returned `rules` object
	We've changed the `stylelint.rules` object in the Node.js API so that every rule is a `Promise` function.
	```diff js
	-const rule = stylelint.rules['block-no-empty'];
	+const rule = await stylelint.rules['block-no-empty'];
	```