owid
Sass `abs` error in Vite
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 [email protected] 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
- Runs without error
- TMux screen 2 should onlybe outputting TSC problems
Steps to reproduce
- Tmux
- 4: Welcome
-
npm i [email protected]
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 X_N.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 [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@">=16.9.0" from [email protected]
npm ERR! node_modules/antd
npm ERR! peer antd@"^4.0.0 || ^5.0.0" from @react-awesome-query-builder/[email protected]
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 [email protected]
npm ERR! node_modules/antd/node_modules/rc-picker
npm ERR! rc-picker@"~2.6.10" from [email protected]
npm ERR! node_modules/antd
npm ERR! peer antd@"^4.0.0 || ^5.0.0" from @react-awesome-query-builder/[email protected]
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 [email protected]
npm ERR! node_modules/mobx-react
npm ERR! mobx-react@"5" from @ourworldindata/[email protected]
npm ERR! packages/@ourworldindata/grapher
npm ERR! @ourworldindata/[email protected]
npm ERR! node_modules/@ourworldindata/grapher
npm ERR! workspace packages/@ourworldindata/grapher from the root project
npm ERR! mobx-react@"5" from @ourworldindata/[email protected]
npm ERR! packages/@ourworldindata/components
➤ YN0000: ┌ Fetch step
npm ERR! @ourworldindata/[email protected]
npm ERR
npm ERR! @ourworldindata/[email protected]
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: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/mobx-react
npm ERR! mobx-react@"5" from @ourworldindata/[email protected]
npm ERR! packages/@ourworldindata/grapher
npm ERR! @ourworldindata/[email protected]
npm ERR! node_modules/@ourworldindata/grapher
npm ERR! workspace packages/@ourworldindata/grapher from the root project
npm ERR! mobx-react@"5" from @ourworldindata/[email protected]
npm ERR! packages/@ourworldindata/components
npm ERR! @ourworldindata/[email protected]
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)
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.
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.
@ikesau this fix could be use the same: https://github.com/owid/owid-grapher/pull/3716