Fix: use import maps + esm.sh + Babel standalone for proper React/Recharts loading
Browse files- index.html +20 -9
index.html
CHANGED
|
@@ -10,23 +10,34 @@
|
|
| 10 |
::-webkit-scrollbar { width: 6px; height: 6px; }
|
| 11 |
::-webkit-scrollbar-track { background: #09090b; }
|
| 12 |
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
|
|
|
|
| 13 |
</style>
|
| 14 |
</head>
|
| 15 |
<body>
|
| 16 |
-
<div id="root"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
|
| 18 |
-
<script
|
| 19 |
-
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
| 20 |
-
<script src="https://unpkg.com/recharts@2.15.0/umd/Recharts.js"></script>
|
| 21 |
-
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| 22 |
|
| 23 |
<script type="text/babel" data-type="module">
|
| 24 |
-
|
| 25 |
-
|
|
|
|
| 26 |
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
|
| 27 |
ScatterChart, Scatter, ZAxis, Cell, Legend, RadarChart, Radar, PolarGrid,
|
| 28 |
PolarAngleAxis, PolarRadiusAxis, LineChart, Line, Area, AreaChart, ComposedChart
|
| 29 |
-
}
|
| 30 |
|
| 31 |
// DATA — API-only pricing, Feb 2026
|
| 32 |
const models = [
|
|
@@ -602,7 +613,7 @@ function App() {
|
|
| 602 |
);
|
| 603 |
}
|
| 604 |
|
| 605 |
-
|
| 606 |
</script>
|
| 607 |
</body>
|
| 608 |
</html>
|
|
|
|
| 10 |
::-webkit-scrollbar { width: 6px; height: 6px; }
|
| 11 |
::-webkit-scrollbar-track { background: #09090b; }
|
| 12 |
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
|
| 13 |
+
#loading { color: #71717a; font-family: system-ui; text-align: center; padding: 80px 20px; font-size: 14px; }
|
| 14 |
</style>
|
| 15 |
</head>
|
| 16 |
<body>
|
| 17 |
+
<div id="root"><div id="loading">Loading...</div></div>
|
| 18 |
+
|
| 19 |
+
<script type="importmap">
|
| 20 |
+
{
|
| 21 |
+
"imports": {
|
| 22 |
+
"react": "https://esm.sh/react@18.3.1",
|
| 23 |
+
"react/": "https://esm.sh/react@18.3.1/",
|
| 24 |
+
"react-dom": "https://esm.sh/react-dom@18.3.1",
|
| 25 |
+
"react-dom/": "https://esm.sh/react-dom@18.3.1/",
|
| 26 |
+
"recharts": "https://esm.sh/recharts@2.15.0?external=react,react-dom"
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
</script>
|
| 30 |
|
| 31 |
+
<script src="https://unpkg.com/@babel/standalone@7.26.9/babel.min.js"></script>
|
|
|
|
|
|
|
|
|
|
| 32 |
|
| 33 |
<script type="text/babel" data-type="module">
|
| 34 |
+
import React, { useState } from "react";
|
| 35 |
+
import { createRoot } from "react-dom/client";
|
| 36 |
+
import {
|
| 37 |
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
|
| 38 |
ScatterChart, Scatter, ZAxis, Cell, Legend, RadarChart, Radar, PolarGrid,
|
| 39 |
PolarAngleAxis, PolarRadiusAxis, LineChart, Line, Area, AreaChart, ComposedChart
|
| 40 |
+
} from "recharts";
|
| 41 |
|
| 42 |
// DATA — API-only pricing, Feb 2026
|
| 43 |
const models = [
|
|
|
|
| 613 |
);
|
| 614 |
}
|
| 615 |
|
| 616 |
+
createRoot(document.getElementById("root")).render(<App />);
|
| 617 |
</script>
|
| 618 |
</body>
|
| 619 |
</html>
|