Intenté agregar un gráfico de líneas chartJS a mi aplicación y obtuve errores de "Llamada de gancho no válida". Pensé que podría estar haciendo algo mal, así que inicié una nueva aplicación e intenté seguir un tutorial. Después de seguir este tutorial MUY básico de YouTube para usar ChartJS en React , aparece una página en blanco. Si voy a inspeccionar->console. Veo errores para 'Llamada de gancho no válida'.

He comprobado ambas versiones de react-native y react-dom; Las versiones no parecen ser el problema. Esta es mi salida de npm ls como referencia.

Mi código ./App.js : es literalmente casi una copia del tutorial. Si elimino la <Bar /> del retorno en la parte inferior, la aplicación funciona bien. :

 import './App.css'; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, } from 'chart.js' import { Bar } from 'react-chartjs-2' import React, {useState, useEffect} from 'react' ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); function App() { const [chartData, setChartData] = useState({ datasets: [], }); const [chartOptions, setChartOptions] = useState({}); useEffect(() => { setChartData({ labels: ["Greg", "Chuck", "Kevin", "Sam", "Seth"], datasets: [ { label: "Votes", data: [50,1,1,0,1000], borderColor: "rgb(53, 162, 235)", backgroundColor: "rgba(53, 162, 235, 0.3)", }, ], }) setChartOptions({ responsive: true, plugins: { legend: { position: "top", }, title: { display: true, text: "Who does the most work?", }, }, }); }, []); return ( <div className="App"> <h2>BarChart</h2> <Bar options={chartOptions} data={chartData} /> </div> ); } export default App;

¿Alguien ve algo que no soy en cuanto a por qué podría estar recibiendo este error?