search

owid / owid-grapher

A platform for creating interactive data visualizations
https://ourworldindata.org
MIT License
1.36k stars 229 forks source link

Sass `abs` error in Vite #3555

Open toni-sharpe opened 3 months ago

toni-sharpe commented 3 months ago

Description

It looks like a bit of time is needed to get a few things up to date if possible, this error relies on that which needs this +2 now that is +2 as well, a few things, the full errors below.

One of those moments where pausing dealing with it is a good move IMO.

The failing code is a breaking change in Sass and to fix it, one has to upgrade to BootStrap 5.3.2 which is not playing ball.

Looks like there's some peer depedencies out of sync

This error is output

npm i bootstrap@v5.3.2npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Expected behaviour

Steps to reproduce

Screenshots

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

   ╷
54 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 54:14             divide()
    node_modules/bootstrap/scss/mixins/_grid.scss 66:15            row-cols()
    node_modules/bootstrap/scss/mixins/_grid-framework.scss 43:13  @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 65:5      media-breakpoint-up()
    node_modules/bootstrap/scss/mixins/_grid-framework.scss 32:5   make-grid-columns()
    node_modules/bootstrap/scss/_grid.scss 72:3                    @import
    node_modules/bootstrap/scss/bootstrap.scss 16:9                @import
    adminSiteClient/admin.scss 4:9                                 root stylesheet

Environment

TMux in iTerm2, and zsh Mac: M1 2020 Sonoma: 14.1.1

Additional context

There might be a general problem here of things slipping out of date, and be very painful if it gets out of hand. Errors suggesting forcing dependency and things I don't think I'd try at this stage, there's a lot going on.

"sass": "^1.69.5",

Sass seems to be 2 full versions behind? Maybe I'm wrong, I'm looking here.

React as well, looks like 19 is in beta, so that's slipping, and they're major components of the site build.

In my experience these things can suddenly tangle as XN.N drops support for Bootstrap 4 but won't run in it's old form in the latest browsers, causing a chain of major updates. I'll be honest, I have got away with this, but the PM at the last big project, he'd tried his luck and it went crunch. It's no fun fixing either!

I appreciate there could be some large blocker keping something React down, we got stuck Node 12 for ages like that at one point. But the honest reflection, we ought to have just done it sooner!

DX

We now have a panel with a lot of trivial text in, which is sent > that way and in among, TS errors, easier to miss, and now with a new starter it'll especially hard for them

Full error on BootStrap 5.3.2

➜  owid-grapher git:(3537-admin-embed-pagination) ✗ npm i bootstrap@v5.3.2
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: mobx-react@5.4.4
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@">=16.9.0" from antd@4.23.2
npm ERR!   node_modules/antd
npm ERR!     peer antd@"^4.0.0 || ^5.0.0" from @react-awesome-query-builder/antd@6.1.1
npm ERR!     node_modules/@react-awesome-query-builder/antd
npm ERR!       @react-awesome-query-builder/antd@"^6.1.1" from the root project
npm ERR!     antd@"^4.23.1" from the root project
npm ERR!   peer react@">=16.9.0" from rc-picker@2.6.10
npm ERR!   node_modules/antd/node_modules/rc-picker
npm ERR!     rc-picker@"~2.6.10" from antd@4.23.2
npm ERR!     node_modules/antd
npm ERR!       peer antd@"^4.0.0 || ^5.0.0" from @react-awesome-query-builder/antd@6.1.1
npm ERR!       node_modules/@react-awesome-query-builder/antd
npm ERR!         @react-awesome-query-builder/antd@"^6.1.1" from the root project
npm ERR!       1 more (the root project)
npm ERR!   76 more (mini-create-react-context, rc-cascader, rc-align, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from mobx-react@5.4.4
npm ERR! node_modules/mobx-react
npm ERR!   mobx-react@"5" from @ourworldindata/grapher@0.0.0
npm ERR!   packages/@ourworldindata/grapher
npm ERR!     @ourworldindata/grapher@0.0.0
npm ERR!     node_modules/@ourworldindata/grapher
npm ERR!       workspace packages/@ourworldindata/grapher from the root project
npm ERR!   mobx-react@"5" from @ourworldindata/components@0.0.0
npm ERR!   packages/@ourworldindata/components
➤ YN0000: ┌ Fetch step
npm ERR!     @ourworldindata/components@0.0.0                                                                                                                 
npm ERR
npm ERR!     @ourworldindata/components@0.0.0
npm ERR!     node_modules/@ourworldindata/components
npm ERR!       workspace packages/@ourworldindata/components from the root project
npm ERR!   2 more (@ourworldindata/utils, the root project)
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from mobx-react@5.4.4
npm ERR!   node_modules/mobx-react
npm ERR!     mobx-react@"5" from @ourworldindata/grapher@0.0.0
npm ERR!     packages/@ourworldindata/grapher
npm ERR!       @ourworldindata/grapher@0.0.0
npm ERR!       node_modules/@ourworldindata/grapher
npm ERR!         workspace packages/@ourworldindata/grapher from the root project
npm ERR!     mobx-react@"5" from @ourworldindata/components@0.0.0
npm ERR!     packages/@ourworldindata/components
npm ERR!       @ourworldindata/components@0.0.0
npm ERR!       node_modules/@ourworldindata/components
npm ERR!         workspace packages/@ourworldindata/components from the root project
npm ERR!     2 more (@ourworldindata/utils, the root project)
danyx23 commented 3 months ago

Hi @toni-sharpe - thanks for reporting this. We should fix this but it's not particularly urgent on our side. If you want to fix it along the lines of what the error message suggests then we'd be happy about a PR, otherwise we'll tackle it in some cooldown.

toni-sharpe commented 1 month ago

Well this wasn't as painful as I thought (at least, until someone whose got a broader view spots some lurking horror) - perhaps my poor ex-PM was the outlier.