react-apexcharts | 📊 React Component for ApexCharts | Chart 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:

You should use a state to keep track of arrayElements.

The way you do it now, the graph components are rendered with arrayElements = []. In the next step data is appended to arrayElements, but this isn't noticed by React so the graphs aren't rerendered.

If you initialize arrayElements as const [arrayElements, setArrayElements] = useState([]) and update the data per below, then React will notice the change and rerender the graph components as soon as the data is received.

In your options replace xaxis with below one

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:

I fixed it. Apparently if you want the colors property to be applied on the lines, not only the chart.type, series.type properties must be set to line but also the type props in the ReactApexChart component.

So, in my case:

Looks like you've already set the type property as the prop.

Try to remove the type from the chart in options and the error is gone:

Okay that was dumb. But yes, to read those error message for other npm newbs out there:

You can achieve that by passing down a prop For instance

tailwindcss v3 only supports Postcss8 and only create-react-app v5 supports Postcss8 for now. So you need to upgrade the create-react-app to v5. No need for craco in create-react-app v5 as well

First make sure to checkout to different branch or push your code to github before migrating, just for safety.

1.First run npm uninstall @craco/craco autoprefixer postcss tailwindcss
Delete the craco.config.js file
Delete the tailwind.config.js
Now just follow the offical tailwindcss docs
2. Run npm install -D tailwindcss postcss autoprefixer
3. npx tailwindcss init -p
copy paste the tailwind.config.js file from tailwindcss docs
4. npm install react-scripts@latest
5. Now npm start

Later paste your previous tailwind.config theme in the new tailwind.config.js file.

The order of steps may or may not matter but following this steps worked for me.