Fix "TypeError: opts.node.rangeBy is not a function" with PostCSS 8.4.4 #5766

fomenkogregory · 2021-12-07T14:17:47Z

What steps are needed to reproduce the bug?

folder structure:
package.json
.stylelintrc.json
styles.scss (empty file)

package.json:

{
  "name": "untitled2",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "lint": "npx stylelint '**/*.scss'"
  },
  "devDependencies": {
    "stylelint": "^14.1.0",
    "stylelint-config-standard-scss": "^3.0.0"
  }
}

npm i
npm run lint

What Stylelint configuration is needed to reproduce the bug?

{
  "extends": "stylelint-config-standard-scss"
}

How did you run Stylelint?

npx stylelint '**/*.scss'

Which version of Stylelint are you using?

^14.1.0

What did you expect to happen?

I expect stylelint to show list of errors.

What actually happened?

TypeError: opts.node.rangeBy is not a function
at new Warning (node_modules/postcss/lib/warning.js:9:29)
at Result.warn (node_modules/postcss/lib/result.js:26:19)
at report (node_modules/stylelint/lib/utils/report.js:103:9)
at node_modules/stylelint/lib/rules/no-empty-source/index.js:28:3
at node_modules/stylelint/lib/lintPostcssResult.js:112:8
at Array.map (<anonymous>)
at lintPostcssResult (node_modules/stylelint/lib/lintPostcssResult.js:103:18)
at lintSource (node_modules/stylelint/lib/lintSource.js:88:8)
at async node_modules/stylelint/lib/standalone.js:218:27
at async Promise.all (index 0)

Process finished with exit code 1

The problem is in this line

Does the bug relate to non-standard syntax?

No

Proposal to fix the bug

Works correctly with exactly 8.3.11 version of postcss.
I compared the code in warning.js between these versions of postcss (8.3.11 and 8.4.4), they changed the method name. :(

Proposal: change dependencies of stylelint to use exactly 8.3.11 version.

The text was updated successfully, but these errors were encountered:

ai · 2021-12-07T17:34:40Z

Could it happen because of the different PostCSS versions at chimera’s AST containing nodes from different PostCSS versions?

Can you look npm ls for different PostCSS versions?

vankop · 2021-12-07T18:05:42Z

Can you look npm ls for different PostCSS versions?

In our case we have a problem using https://github.com/ismay/stylelint-no-unsupported-browser-features/blob/master/package.json this package has postcss as a dependency

fomenkogregory · 2021-12-07T18:13:45Z

this is npm ls from this example

└─┬ stylelint@14.0.1
  └── postcss@8.4.4

and this is from another project (new angular 13 project) (works fine)

└─┬ stylelint@14.0.1
  ├─┬ postcss-safe-parser@6.0.0
  │ └── postcss@8.3.6 deduped
  └── postcss@8.3.11

p-m-p · 2021-12-07T19:34:53Z

I'm also seeing this on the no-empty-source rule, same versions as @fomenkogregory installed today.

ybiquitous · 2021-12-08T00:50:12Z

I've created a reproduction repository, but such a TypeError never occurs. 🤔
Is there something I missed?

https://github.com/ybiquitous/stylelint-issue-5766/runs/4451383596?check_suite_focus=true#step:6:1

ai · 2021-12-08T02:14:42Z

@fomenkogregory can you try to update dependencies by running npm update or yarn upgrade to test that it is happens because of different PostCSS versions?

fomenkogregory · 2021-12-08T06:01:27Z

I've created a reproduction repository, but such a TypeError never occurs. 🤔 Is there something I missed?

https://github.com/ybiquitous/stylelint-issue-5766/runs/4451383596?check_suite_focus=true#step:6:1

thanks! I'll try to clone your repo and see if it will work on my side. Then I will compare lock file and node_modules and to see what's differs.

BroFox86 · 2021-12-08T10:53:08Z

In my case I just added PostCSS to my project by npm i postcss and the error from the Stylelint VSC plugin was gone.

lregla · 2021-12-09T01:20:42Z

Also started with a fresh install of stylelint@14.1.0 and stylelint-config-standard-scss@3.0.0. Ran into the same error described above. Installed postcss@8.4.4 as @BroFox86 did, and the error is gone.

ai · 2021-12-09T01:54:23Z

Thanks for the help.

I will try to find solution during this weekend.

fomenkogregory · 2021-12-09T21:18:43Z

Also started with a fresh install of stylelint@14.1.0 and stylelint-config-standard-scss@3.0.0. Ran into the same error described above. Installed postcss@8.4.4 as @BroFox86 did, and the error is gone.

And moreover, you can then uninstall postcss and all works fine for current and all future projects. I wasn't been able to reproduce the issue for any new projects as well.

RiZKiT · 2021-12-20T16:17:01Z

Seems to be related to/a duplicate of: #5756

Add a custom Vite plugin that generates RTL versions of all built .css files. This causes our Codex build to generate both codex.style.css and codex.style-rtl.css. Pin postcss at v8.3.11 to prevent stylelint from crashing, see stylelint/stylelint#5766 Bug: T295189 Change-Id: I4b7203375b8f8a40dc8c24086544dc7a011e88bf

Yohandah · 2022-02-01T10:17:58Z

When will it ship ?

ai · 2022-02-01T10:22:46Z

@Yohandah the solution was not found. Please help in investigation and send PR if you want to fix it sooner.

Yohandah · 2022-02-01T10:29:33Z

Sorry I read too fast I thought a PR was ready.

A weird thing happened while I was looking for a fix.

I removed "stylelint-config-prettier" from my extends array, the error was gone, then I re-added it to see if the errors comes back, and it's completely gone I can't reproduce it.

ijcnvv · 2022-02-01T19:14:37Z

totally uninstalling postcss & stylelint with their plugins helped me. I Installed postcss at first and then stylelint and have no errors now

Yohandah · 2022-02-02T10:01:01Z

It seems the error only happens when I comment using // instead of /* ?

Screenshare.-.2022-02-02.10_57_16.AM.mp4

KeithGillette · 2022-02-06T15:34:10Z

Installing postcss@latest (8.4.6 at my testing) then uninstalling it prevented the TypeError: opts.node.rangeBy is not a function error upon updating to stylelint@14.2.0 in our project, just as @fomenkogregory found. 🤷🏻‍♂️

ThomasHenrissat · 2022-02-14T09:12:42Z

It seems the error only happens when I comment using // instead of /* ?

I can confirm this. When I removed the // comments from my file the error stopped showing up.

JounQin · 2022-08-06T14:47:56Z

@ai I'm not so familiar with the source codes from postcss, and I don't quite understand where node.rangeBy will be normalized back? Can you point it more specifically?

ai · 2022-08-06T14:59:22Z

@JounQin Container.rebuild replaces prototype of every nodes object of AST. So even if parse returned old AST, rebuild will update it to me version.

JounQin · 2022-08-06T15:14:39Z

@ai It's still unclear where node.rangeBy would be patched by Container.rebuild() to me. 😅

snebjorn · 2022-08-06T16:21:00Z

@JounQin The assignment of the rangeBy function is done here https://github.com/postcss/postcss/blob/main/lib/container.js#L415-L423 via Object.setPrototypeOf()

However the node that is throwing the error is of type root which the function doesn't handle.

  if (node.type === 'atrule') {
    Object.setPrototypeOf(node, AtRule.prototype)
  } else if (node.type === 'rule') {
    Object.setPrototypeOf(node, Rule.prototype)
  } else if (node.type === 'decl') {
    Object.setPrototypeOf(node, Declaration.prototype)
  } else if (node.type === 'comment') {
    Object.setPrototypeOf(node, Comment.prototype)
  }

The function is being called for the root type.

@ai could that be the issue?

ai · 2022-08-06T18:25:38Z

@snebjorn exactly! I added the fix postcss/postcss@f289e17

I released a fix in PostCSS 8.4.15. Can we try it?

snebjorn · 2022-08-06T18:55:13Z

Not sure where Container.registerRoot is getting called from. But I'm getting Root as undefined when I update the postcss version inside stylelint.

TypeError: Cannot read properties of undefined (reading 'prototype')
    at Container.rebuild (~\styelint-no-rangeBy\node_modules\stylelint\node_modules\postcss\lib\container.js:428:38)

Dependency tree

styelint-no-rangeBy@ ~\styelint-no-rangeBy
├─┬ postcss-less@6.0.0
│ └── postcss@8.3.5 deduped
├── postcss@8.3.5
└─┬ stylelint@14.9.1
  ├─┬ @csstools/selector-specificity@2.0.2
  │ └── postcss@8.4.15 deduped
  ├─┬ postcss-safe-parser@6.0.0
  │ └── postcss@8.4.15 deduped
  └── postcss@8.4.15

ai · 2022-08-06T19:00:29Z

@snebjorn sorry, can you try again with PostCSS 8.4.16?

It was a small typo and we have not tests for AST migration hack.

snebjorn · 2022-08-06T19:03:32Z

Gentlemen, we have a winner!

❯ npm run stylelint

> stylelint
> stylelint src/**/*.less


src/foo.less
 2:22  ✖  Unexpected whitespace at end of line  no-eol-whitespace

ai · 2022-08-06T19:06:42Z

Now let’s bump Stylelint with the latest PostCSS version and ask every user just to update stylelint in their package.json.

Thanks to @JounQin and @snebjorn for solving this very complex bug.

snebjorn · 2022-08-06T19:33:05Z

Thanks for the quick responses. It kept me motivated :)
It's been a pleasure!

close #5766

ybiquitous · 2022-08-07T08:36:24Z

@snebjorn @JounQin @ai
I appreciate your work very much! 👏🏼

close #5766

DreamShaded · 2022-08-08T20:27:17Z

hi! so users have to wait stylelint v14.9.2, yep?)

update: no, i've just updated postcss to 8.4.16 and it all works *___* thx a lot guys!

ismay · 2022-09-09T15:24:45Z

This bug has affected a stylelint plugin I maintain and I'm a little confused by it. My lib has a peerdep on stylelint >=13.0.0, and a direct dep on postcss 8.x. I'm recommending my users to upgrade to stylelint v14.10.0 or above to resolve this as recommended in the comment by ai above.

However, it's still affecting users of my plugin that are on stylelint v13. Would the only way to address this for users of stylelint 13 be to backport a fix to stylelint v13? And is that a feasible solution?

Because I'm thinking of just restricting my peerdep range to stylelint v14 just to resolve this for users of my lib, but I want to make sure that I understand exactly what's going on.

JounQin · 2022-09-09T15:27:51Z

@ismay No, only postcss needs to be upgraded to v8.4.16.

ismay · 2022-09-09T15:33:59Z

@ismay No, only postcss needs to be upgraded to v8.4.16.

@JounQin Sorry, it's not really clear to me to what part of my comment you're responding. Are you referring to the recommendation I've made to my users, or to the fix that could be made to stylelint v13?

JounQin · 2022-09-09T22:52:35Z

@ismay I mean it's not required to upgrade to v14, you only need to upgrade the postcss dep on your side.

Upgraded postcss to fix a type error when running stylelint --fix. See stylelint/stylelint#5766. Fixed the fileglob for CSS files and made simple fixes for stylelint errors. Change-Id: If838a740f97532b9b29ad16fb6aeb5de72ed49d1 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/455956 Run-TryBot: Jamal Carvalho <jamal@golang.org> TryBot-Result: kokoro <noreply+kokoro@google.com> Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>

zengshine · 2023-02-02T01:59:11Z

Now let’s bump Stylelint with the latest PostCSS version and ask every user just to update stylelint in their package.json.

Thanks to @JounQin and @snebjorn for solving this very complex bug.

respect!

AndyOGo · 2023-02-10T18:41:49Z

I face that type error again after upgrading to v15

TypeError: node.rangeBy is not a function
at Object.report (/stylelint-declaration-strict-value/node_modules/stylelint/lib/utils/report.js:35:34)

ybiquitous · 2023-02-11T08:59:44Z

@AndyOGo That error should never occur if you are using the latest PostCSS. Please recheck your dependency tree.

AndyOGo · 2023-02-11T10:59:17Z

@ybiquitous

Edit:
Never mind, it seems to be caused by stylelint-test-rule-tape.

Indeed, I'm surprised too.
I'm getting postcss from stylelint and it is the latest of 8.4.21.

npm ls postcss
└─┬ stylelint@15.0.0
  ├─┬ @csstools/selector-specificity@2.1.1
  │ └── postcss@8.4.21 deduped
  ├─┬ postcss-safe-parser@6.0.0
  │ └── postcss@8.4.21 deduped
  └── postcss@8.4.21

FYI:
That is my PR to upgrade my plugin to v15
AndyOGo/stylelint-declaration-strict-value#310

saket2403 mentioned this issue Dec 7, 2021

CSS Linter failing after upgrade to postcss version 8.4 and above. postcss/postcss#1685

Open

PxlBuzzard mentioned this issue Dec 7, 2021

Crashes after upgrading deps RJWadley/stylelint-no-unsupported-browser-features#224

Closed

ybiquitous added status: needs investigation triage needs further investigation type: bug a problem with a feature or rule labels Dec 8, 2021

jeddy3 removed the type: bug a problem with a feature or rule label Dec 9, 2021

benbcai mentioned this issue Dec 15, 2021

Added terra-graphs-docs into terra-ui cerner/terra-ui#429

Merged

xavortm mentioned this issue Dec 20, 2021

Stylelint doesn't work with postcss 8.3.11 [?] 10up/10up-toolkit#125

Closed

jeddy3 mentioned this issue Dec 20, 2021

Don't work with svelte template more (v14) #5647

Closed

jeddy3 changed the title ~~Stylelint doesn't work with postcss 8.4.4~~ Fix "TypeError: opts.node.rangeBy is not a function" with PostCSS 8.4.4 Feb 10, 2022

diescake mentioned this issue Feb 14, 2022

chore: update dependency stylelint-config-standard to v25 kufu/smarthr-ui#2276

Merged

1 task

JounQin added a commit that referenced this issue Aug 6, 2022

chore(deps): upgrade postcss to ^8.4.16

da0f991

close #5766

JounQin mentioned this issue Aug 6, 2022

chore(deps): upgrade postcss to ^8.4.16 #6244

Merged

JounQin closed this as completed in #6244 Aug 8, 2022

JounQin added a commit that referenced this issue Aug 8, 2022

chore(deps): upgrade postcss to ^8.4.16 (#6244)

e09d6de

close #5766

JounQin mentioned this issue Aug 23, 2022

Enable packageManager with corepack #6298

Open

AndyOGo mentioned this issue Feb 10, 2023

chore: upgrade stylelint AndyOGo/stylelint-declaration-strict-value#310

Merged

AndyOGo mentioned this issue Feb 10, 2023

Release 15.1.0 #6647

Closed

6 tasks

iiroj mentioned this issue Jun 14, 2023

eslint --fix failed without output (KILLED). lint-staged/lint-staged#1298

Closed

andieelmes mentioned this issue Jun 28, 2023

Update postcss-bem-linter to v^4.0.0 simonsmith/stylelint-selector-bem-pattern#62

Merged

Fix "TypeError: opts.node.rangeBy is not a function" with PostCSS 8.4.4 #5766

Fix "TypeError: opts.node.rangeBy is not a function" with PostCSS 8.4.4 #5766

Comments

fomenkogregory commented Dec 7, 2021 • edited

What steps are needed to reproduce the bug?

What Stylelint configuration is needed to reproduce the bug?

How did you run Stylelint?

Which version of Stylelint are you using?

What did you expect to happen?

What actually happened?

Does the bug relate to non-standard syntax?

Proposal to fix the bug

ai commented Dec 7, 2021

vankop commented Dec 7, 2021

fomenkogregory commented Dec 7, 2021 • edited

p-m-p commented Dec 7, 2021

ybiquitous commented Dec 8, 2021 • edited

ai commented Dec 8, 2021

fomenkogregory commented Dec 8, 2021 • edited

BroFox86 commented Dec 8, 2021

lregla commented Dec 9, 2021

ai commented Dec 9, 2021

fomenkogregory commented Dec 9, 2021 • edited

RiZKiT commented Dec 20, 2021

Yohandah commented Feb 1, 2022

ai commented Feb 1, 2022

Yohandah commented Feb 1, 2022

ijcnvv commented Feb 1, 2022

Yohandah commented Feb 2, 2022

KeithGillette commented Feb 6, 2022

ThomasHenrissat commented Feb 14, 2022

JounQin commented Aug 6, 2022

ai commented Aug 6, 2022

JounQin commented Aug 6, 2022 • edited

snebjorn commented Aug 6, 2022

ai commented Aug 6, 2022

snebjorn commented Aug 6, 2022 • edited

ai commented Aug 6, 2022

snebjorn commented Aug 6, 2022

ai commented Aug 6, 2022 • edited

snebjorn commented Aug 6, 2022

ybiquitous commented Aug 7, 2022

DreamShaded commented Aug 8, 2022 • edited

ismay commented Sep 9, 2022

JounQin commented Sep 9, 2022 • edited

ismay commented Sep 9, 2022

JounQin commented Sep 9, 2022

zengshine commented Feb 2, 2023

AndyOGo commented Feb 10, 2023

ybiquitous commented Feb 11, 2023

AndyOGo commented Feb 11, 2023 • edited

fomenkogregory commented Dec 7, 2021 •

edited

fomenkogregory commented Dec 7, 2021 •

edited

ybiquitous commented Dec 8, 2021 •

edited

fomenkogregory commented Dec 8, 2021 •

edited

fomenkogregory commented Dec 9, 2021 •

edited

JounQin commented Aug 6, 2022 •

edited

snebjorn commented Aug 6, 2022 •

edited

ai commented Aug 6, 2022 •

edited

DreamShaded commented Aug 8, 2022 •

edited

JounQin commented Sep 9, 2022 •

edited

AndyOGo commented Feb 11, 2023 •

edited