try importing chart async

.github/workflows/publish-package.yml

@@ -3,7 +3,7 @@ name: publish on github
 on:
   push:
     branches:
-      - main
+      - feature/chart-ssr
 
 jobs:
   publish-gpr:

packages/storykit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyprotocol/storykit",
   "author": "storyprotocol engineering <eng@storyprotocol.xyz>",
-  "version": "0.1.2",
+  "version": "0.1.6-mrtest.7",
   "type": "module",
   "main": "dist/storyprotocol-storykit.cjs.js",
   "module": "dist/storyprotocol-storykit.esm.js",

packages/storykit/rollup.config.js

@@ -16,15 +16,27 @@ const config = [
         file: packageJson.main,
         format: "cjs",
         sourcemap: true,
+        globals: {
+          //   react: "React",
+          //   "react-dom": "ReactDOM",
+          "react-apexcharts": "ApexCharts",
+        },
       },
       {
         file: packageJson.module,
         format: "esm",
         sourcemap: true,
+        globals: {
+          //   react: "React",
+          //   "react-dom": "ReactDOM",
+          "react-apexcharts": "ApexCharts",
+        },
       },
     ],
     plugins: [peerDepsExternal(), resolve(), commonjs(), typescript(), terser(), postcss()],
-    external: ["react/jsx-runtime"],
+    // external: ["react/jsx-runtime"],
+    // external: ["react/jsx-runtime", "react", "react-dom", "react-apexcharts"],
+    external: ["react/jsx-runtime", "react-apexcharts"],
   },
   {
     input: "src/index.ts",

packages/storykit/src/components/IPARoyaltyChart/IPARoyaltyChart.tsx

@@ -1,6 +1,7 @@
 import { shortenAddress } from "@/lib/utils"
 import { useIPAssetContext } from "@/providers"
-import Chart from "react-apexcharts"
+import { useEffect, useState } from "react"
+// import Chart from "react-apexcharts"
 import { Address } from "viem"
 
 import "../../global.css"
@@ -10,6 +11,23 @@ function IPARoyaltyChart() {
 
   const { royaltyData } = useIPAssetContext()
 
+  // console.log("Chart", Chart)
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [Chart, setChart] = useState<any>(null)
+  useEffect(() => {
+    import("react-apexcharts").then((Component) => setChart(Component))
+  }, [])
+  console.log("Chart", Chart)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // let ApexChart = Chart ? (Chart as unknown as any)?.default || Chart : null
+  let ApexChart = Chart
+  console.log("ApexChart 1", ApexChart)
+  if (ApexChart?.default) ApexChart = ApexChart.default
+  console.log("ApexChart 2", ApexChart)
+  if (ApexChart?.default) ApexChart = ApexChart.default
+  console.log("ApexChart 3", ApexChart)
+
   if (royaltyData?.targetAncestors) {
     const chart = {
       options: {
@@ -70,7 +88,9 @@ function IPARoyaltyChart() {
     return (
       <div className="flex flex-col items-center justify-between">
         <div className="min-h-[230px]">
-          <Chart options={chart.options} series={chart.series} type="pie" height={250} width="300" />
+          {ApexChart ? (
+            <ApexChart options={chart.options} series={chart.series} type="pie" height={250} width="300" />
+          ) : null}
         </div>
         <div className="w-full min-w-[300px] px-2">
           <dl className="divide-y divide-gray-100 overflow-x-hidden text-sm leading-6">