simplebar | Custom scrollbars vanilla javascript library | User Interface library

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.

As in actions/checkout issue 14, you can add as a first step:

I looked at the docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here. That's why you are getting the error.

So you simply need to provide the type of your props like so:

TL/DR: You need to use dyn Bar + 'a instead of plain dyn Bar:

The problem is actually very complicated. Looking at its implementation, doesn't pass either the React ref or the role prop to the correct element. The correct element I believe is .scrollbar-content, which is very deeply nested and basically untouchable.

ETA: In case you thought of getting cheesy with document.querySelectorAll setAttribute shenanigans, that will not work. The ref also needs to point at the correct element, and I don't think that's codeable on the workspace side.

The cleanest solution I can think of is to use Yarn 3 (👍) and patch simplebar-react yourself, passing the needed props to .scrollbar-content. Then you do:

You need to add alias to your layouts folder:

Could not resolve this problem, so instead I found a replacement for laravel-mix

I used gulp and created my own scripts for parsing sass and mixing css,js and minification.

https://gulpjs.com/

SimplebarAngular requires Angular legacy-peer-deps=true , but you have Angular 12.x. If you would like to ignore these issues - just follow instructions from the error:

• use npm install simplebar-angular --save --force

• use npm install simplebar-angular --save --legacy-peer-deps

• or you could add .npmrc to the project root to always apply legacy-peer-deps:

  legacy-peer-deps=true

So, after trying a lot of things, this is the best solution I came across. Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.

Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.

In Webpack I am creating a plugin:

And in code, when I want to import the Simplebar react component, I do the following in the constructor:

And then, whenever I want to use my imported component, I do the following:

This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.

Does anyone know a better solution? Or do you have concerns?

node-sass 4.x doesn't support Node 16 https://github.com/sass/node-sass#node-version-support-policy (I believe this might also be the case for CRA)