#[SOLVED] getting Uncaught TypeError cyclic object value when using useStore in a preact component

52 messages · Page 1 of 1 (latest)

golden stone
# 
import {map} from 'nanostores'

let allData = map({})

export const currentData = map({})

export function setCurrentData(cluster) {
    currentData.set(allData.get[cluster])
}

export async function fetchYearData(year) {
    const response = await fetch(`https://harikar-reports-api.cyclic.app/v2/dashboard/${year}`)
    if (!response.ok) {
        console.log(response.statues)
    } else {
    const data = await response.json()
    allData.set(data)
    setCurrentData('general')
    }
}

my store ^

import { useStore } from "@nanostores/preact";
import { currentData } from "src/stores/store";

const DistrictsChart = () => {
  const $currentData = useStore(currentData);

line four of the second codeBlock is where the error happening.

I am calling the fetchYearData(year) in a useEffect in another preact component

  useEffect(() => {
    fetchYearData(props.year);
  }, []);

the component with the useEffect is using client:load, and the one with useStore is client:only="preact"

golden stone
# 
// store.js
export const series = atom([1, 5, 9])

export function setCurrentCluster() {
    series.set([1,2,3])
}


// Clusters.jsx
import { setCurrentCluster } from "src/stores/store";
  function handleClick() {
    setCurrentCluster();
  }

//DistrictsChart.jsx
import { useStore } from "@nanostores/preact";
import { series } from "src/stores/store";

const DistrictsChart = () => {
  const $series = useStore(series);
...
  const dataSeries = [
    {
      name: "Benefciaries",
      data: $series,
    },
  ];
#

even this is failing

# 
Uncaught TypeError: cyclic object value
    value react-apexcharts.min.js:1
    Preact 12
    notify index.js:32
    set index.js:15
    setCurrentCluster store.js:8
    handleClick Clusters.jsx:11
    onClick Clusters.jsx:43
    Preact 20
    hydrate (index):336
    <anonymous> (index):336
    async* (index):336
    start (index):336
    childrenConnectedCallback (index):336
    connectedCallback (index):336
    connectedCallback (index):336
    LifecycleConnectedCallback* (index):336
react-apexcharts.min.js:1:3731
    value react-apexcharts.min.js:1
    Preact 2
    some self-hosted:137
    z Preact
    some self-hosted:137
    Preact 2
    some self-hosted:137
    Preact 7
    notify index.js:32
    set index.js:15
    setCurrentCluster store.js:8
    handleClick Clusters.jsx:11
    onClick Clusters.jsx:43
    Preact 20
    hydrate (index):336
    <anonymous> (index):336
    AsyncFunctionNext self-hosted:807
    (Async: async)
    <anonymous> (index):336
    start (index):336
    childrenConnectedCallback (index):336
    AsyncFunctionNext self-hosted:807
    (Async: async)
    connectedCallback (index):336
    (Async: MutationCallback)
    connectedCallback (index):336
    (Async: LifecycleConnectedCallback)
    <anonymous> (index):336
golden stone
#

this one is a real headscratcher

#

by simply using the useStore hook, I get the error

golden stone
#

anyone can take a look at this please? I am trying and failing to fix it.

sick mountain
#

I would expect to see a relative path?

golden stone
#

sorry, I was not online

#

yes, the path is correct, I also tried a relative path ../../etc

#

I might not be online now, as I do not have Discord on my phone, should I remind you tomorrow around the same time you answered me today?

sick mountain
# golden stone sorry, I was not online

Have you tried ./src/stores/store? I'm assuming you are importing a local file? What's the folder structure like as Astro works within the default src folder.

I'll have another look tomorrow unless one of the other support crew deal with it beforehand 👍

golden stone
# 
// Clusters.jsx
import { setCurrentCluster } from "../../stores/store";
# 
// DistrictsChart.jsx
import { series } from "../../stores/store";
#

I tried this, the link is correct, the results are showing find in DistrictsChart.jsx, but when I try updating them, I get that error

#

my jsx components are inside the components directory, in subdirectories

#

notice when I click on one of the clusters in the left side, the value below the chart updates, but it throws and error and I no longer can click and of the clusters

#

but now I am using it as the input for for the chart, the chart does not update, and the error is thrown

sick mountain
golden stone
# 
export function setCurrentCluster() {
    series.set([1,2,3])
}
#

now I am just trying to swap one array with another

#

here is a link to the repo if this helps

sick mountain
# golden stone ``` export function setCurrentCluster() { series.set([1,2,3]) } ```

I've had a look and I've narrowed it down to @nanostores/preact

forceRender is called within useStore, when it's commented out it doesn't complain.

A bit more digging is needed and I haven't found a workaround either.

https://github.com/nanostores/preact/blob/main/index.js#L23

GitHub
preact/index.js at main · nanostores/preact

Preact integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores - preact/index.js at main · nanostores/preact

golden stone
#

oh, so the problem is in the library, I was also thinking it might be so

#

thank you 🙂

#

should one make an issue?

sick mountain
#

I've solved it for you

sick mountain
# golden stone oh, so the problem is in the library, I was also thinking it might be so

I've just looked at which values dataLabels is expecting and you have dataLabels.position = top. I can't see it as an option plus it is trying to reference it as opposed to being a string?

https://apexcharts.com/docs/options/datalabels/

ApexCharts.js
dataLabels – ApexCharts.js

dataLabels: { enabled: true, enabledOnSeries: undefined, formatter: function (val, opts) { return val }, textAnchor: 'middle', distributed: false, offsetX: 0, offsetY: 0, style: { fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 'bold', colors: undefined }, background: { enabled: true, foreColor: '#fff', padding: 4, bord...

golden stone
#

you can find it here

# 
plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  }
},
sick mountain
#

Your options contain

const options = {
  plotOptions: {
    ...
  },
  dataLabels: {
    enabled: true,
    position: top, <- this is the issue, it's not string? 
    offsetY: -30,
    ...
  }
  ...
}
golden stone
#

oh

#

I did not see that, just a sec

#

WTH, that was it? Why do I and JS suck this much lol

#

Thank you so much theisel, this was causing me a real headache

golden stone
sick mountain
#

Have another look at the docs, the property position isn't part of dataLabels

https://apexcharts.com/docs/options/datalabels/

ApexCharts.js
dataLabels – ApexCharts.js

dataLabels: { enabled: true, enabledOnSeries: undefined, formatter: function (val, opts) { return val }, textAnchor: 'middle', distributed: false, offsetX: 0, offsetY: 0, style: { fontSize: '14px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 'bold', colors: undefined }, background: { enabled: true, foreColor: '#fff', padding: 4, bord...

sick mountain
golden stone
#

yes, that was right, and moving it to the plotOptions, and making 'top' a string fixed it.

#

oh, I thought you said there was an issue in the library, sorry, I just woke up and not fully working yet 😅

#

I should really apply the scientific method of bug fixing next time.

sick mountain
#

Now you can move on 🙌

golden stone
#

will, I guess the error message in the console was not that bad

#

as it was somewhere talking about the options in apexcharts-react

#

I guess I next time I should take JS error messages more seriously