Error: Converting circular structure to JSON at JSON.stringify - when context/reducer is used in island app folder

I am using a simple Todo application to try Fresch App and I found this problem.

I have tried multiple ways to use Context with Reducer with an application, but it has been mission impossible. Either it doesn’t work or it gives errors.

The component file that uses the context, I am creating it in the island folder.

When I create the context/reducer files in the island folder the application crashes:

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)

If I put them outside the island folder, the application runs, but it is not possible to trigger the dispatch function to change the state and refresh the screen. Where should I create the context, provider and reducer files?

Is there or where can I find an example of how to use Context/Reducer in a Deno Fresh application with typescript?

[lucacasonato]

It is only possible to pass JSON serializable values to as props to islands. Why? Because there are actually two renders going on. The first render happens on the server - here the route + all islands are rendered. Here any prop can be passed between route and island, because they are being rendered in the same JavaScript VM. Then you have the client side render. The client side render ONLY renders islands. There is no route that is rendered that could pass props to the island. To make the island receive the right props anyway, we need to capture the props passed to the island during the server render and then send them to the client. This sending is done using JSON serialization.

And why do contexts not work? Again it’s related to the two renders. Contexts can work on the server render because there is one continuous render going on. But in the client side render the route is not rendered, only the islands. Because of this, during the island render any context defined in the route will be absent, because during the client render these context providers were never run.

[og-dev]

I found this repo https://github.com/mandolyte/experiemnt-fresh/tree/main/use-context

maybe it will be usefull

EDIT: Okey I have tried and I have the same error than you

It is the same problem. In the example they use useState, I am using useReducer, but the result and problem is the same.

It seems that the failure is when the JavaScript code of the Context Provider is created.

If the provider is not in the island folder, the function to change the state and refresh the screen is not included in the JavaScript.

But if you put the Context Provider file in the island folder, you get the error of Converting circular structure to JSON at JSON.stringify

Thanks for finding that repo, so others can run it and maybe find the problem.