Fix Error ERR_REQUIRE_ESM for string-width

[Shkulipa]

What minimal example or steps are needed to reproduce the bug?

setup Nextjs v13.4.19
setup stylelint, try close vscode, and try run stylelint
or some time later try again with run stylelint

What minimal configuration is needed to reproduce the bug?

{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-recess-order"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "selector-class-pattern": [
      "^([a-z]|[a-z][a-zA-Z0-9])+$",
      {
        "message": "Expected custom property name to be camelCase"
      }
    ],
    "scss/at-mixin-pattern": [
      "^([a-z]|[a-z][a-zA-Z0-9])+$",
      {
        "message": "Expected custom property name to be camelCase"
      }
    ]
  }
}

How did you run Stylelint?

{
    "stylelint:check": "stylelint \"**/*.scss\"",
     "stylelint:fix": "stylelint \"**/*.scss\" --fix",
}

in terminal:

yarn stylelint:check
yarn stylelint:fix

Which Stylelint-related dependencies are you using?

"dependencies": {
    "@reduxjs/toolkit": "^1.9.6",
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "axios": "^1.5.0",
    "classnames": "^2.3.2",
    "eslint": "^8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-pro-sidebar": "^1.1.0-alpha.1",
    "react-redux": "^8.1.2",
    "redux-persist": "^6.0.0",
    "swr": "^2.2.4",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.4.2",
    "@storybook/addon-interactions": "^7.4.2",
    "@storybook/addon-links": "^7.4.2",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.4.2",
    "@storybook/nextjs": "^7.4.2",
    "@storybook/react": "^7.4.2",
    "@storybook/testing-library": "^0.2.1",
    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
    "@typescript-eslint/parser": "^6.7.2",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-storybook": "^0.6.13",
    "husky": "^8.0.0",
    "lint-staged": "^14.0.1",
    "prettier": "^3.0.3",
    "sass": "^1.67.0",
    "storybook": "^7.4.2",
    "stylelint": "^15.10.3",
    "stylelint-config-recess-order": "^4.3.0",
    "stylelint-config-recommended-scss": "^13.0.0",
    "stylelint-order": "^6.0.3"
  }

What did you expect to happen?

fix or check scss files

What actually happened?

Get error:

amac@MacBook-Pro-Amac football-manager-front % yarn stylelint:check
yarn run v1.22.19
$ stylelint "**/*.scss"
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/string-width/index.js from /Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/stylelint/lib/formatters/stringFormatter.js not supported.
Instead change the require of index.js in /Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/stylelint/lib/formatters/stringFormatter.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/stylelint/lib/formatters/stringFormatter.js:4:21)
    at /Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/stylelint/lib/formatters/index.js:10:27
    at lazy (/Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/import-lazy/index.js:3:33)
    at Object.apply (/Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/import-lazy/index.js:15:22)
    at prepareReturnValue (/Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/stylelint/lib/prepareReturnValue.js:58:23)
    at standalone (/Users/amac/Documents/projects/own-project/projects/football-manager/football-manager-front/node_modules/stylelint/lib/standalone.js:268:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Do you have a proposal to fix the bug?

i delete .stylelintrc
then npx stylelint
it works for a certain time with all the rules that I described, and then again this error

i think maybe need transfer from old ES5 to ES6 to fix it or set in package(inside lib) type: 'CommonJS'

[ybiquitous]

@Shkulipa Thanks for the report by using the template. I guess your dependency tree has a newer version of string-width than the version (^4.2.3) that stylelint requires:

stylelint/package.json

Line 170 in 7e629d4

"string-width": "^4.2.3",

The newer versions of string-width are pure ESM, and stylelint doesn't support ESM yet.

So, can you take a look at your dependency tree again?

[Shkulipa]

@ybiquitous
hi, thank you for reply.

if i correct understood you, I checked three dependencies in stylelint three(in node_modules), and you are right, there a "string-width": "^4.2.3"

can you suggest please in this, how i can fix it ?

• set some rules for string-width in .stylelintrc that will rewrite it ?
• change directly in node_modules version of string-width on the earlier ?

Thanks

[ybiquitous]

Um, I'm not sure why a newer version of string-width is used, but can you use resolutions to resolve the issue if using Yarn?

[ybiquitous]

#5782 might help you.

[Shkulipa]

@ybiquitous thanks you for your help, resolutions doesn't help, and i think that it can cause to extra errors, because not only stylelint using string-width.
But i noticed that error appears when i use yarn , when i switched to npm, it seems disappeared.

[Mouvedia]

For the ones wondering why we didn't update string-width to version 5.1.2, see #6623.

[szepeviktor]

Pretend you did not see this!

sed -i -e "s#'strip-ansi'#'strip-ansi-cjs'#" node_modules/stylelint/lib/writeOutputFile.js

[jeddy3]

Closing as related to package manager resolution rather than stylelint itself.