[BUG] TypeError: cyclic object value, while using access control cerbos.

[dipbazz]

Describe the bug

The problem occurred when trying to use cerbos as access control. The problem doesn't occur when used cerbos without icon in resource but occurs when we use custom icon for our resources.

Steps To Reproduce

1. Install any icons library for example @ant-design/icons, or react-icons

2. Use icon on the resource as

   <Refine
   // other options 
   accessControlProvider={{
    can: async ({ action, params, resource }) => {
        const result = await cerbos.checkResource({
            principal: {
                id: "123", // Fake a user ID
                roles: [role],
                policyVersion: "default",
                // this is where user attributes can be passed
                attributes: {},
            },
            resource: {
                kind: resource,
                policyVersion: "default",
                id: params?.id + "" || "new",
                attributes: params,
            },
            // the list of actions on the resource to check authorization for
            actions: [action],
        });
        return Promise.resolve({
            can: result.isAllowed(action) || false,
        });
    },
   }}
   resources={[
    {
        name: "posts",
        list: PostList,
        icon: <StepBackwardOutlined />,
    }
   ]}
   />
   ```
   

3. Now run the project and check the console you will get an error as

   Uncaught (in promise) TypeError: cyclic object value
       transport index.ts:132
       cerbos client.ts:663
       checkResources client.ts:299
       checkResource client.ts:246
       can App.tsx:103
       M index.tsx:119
       C index.tsx:55
       C index.tsx:55
       C index.tsx:55
       React 14
       batchCalls notifyManager.ts:51
       notifyFn notifyManager.ts:15
       flush notifyManager.ts:63
       flush notifyManager.ts:62
       batchNotifyFn notifyManager.ts:18
       flush notifyManager.ts:61
       promise callback*scheduleMicrotask utils.ts:414
       flush notifyManager.ts:60
       batch notifyManager.ts:29
       dispatch query.ts:577
       setData query.ts:203
       onSuccess query.ts:464
       resolve retryer.ts:103
       promise callback*run retryer.ts:150
       createRetryer retryer.ts:202
       fetch query.ts:450
       executeFetch queryObserver.ts:327
       onSubscribe queryObserver.ts:107
       subscribe subscribable.ts:14
       useBaseQuery useBaseQuery.ts:77
   

Expected behavior

Cerbos should hit the API to check if the use have access to the resource or not.

Screenshot

No response

Desktop

• OS: Ubuntu 22.04
• Browser: Firefox
• Version: 110.0
• Used dataProvider: refine-simple-rest by overriding to meet custom need.
• Access control: cerbos

Mobile

No response

Additional Context

No response

[BatuhanW]

Thanks you for the report @dipbazz, quite an interesting bug. We'll check it.

[omeraplak]

Hey @Mikilll94 , We've fixed this issue with @refinedev/[email protected].

If you haven't yet upgraded your project to Refine v4, please follow our migration guide document at https://refine.dev/docs/migration-guide/3x-to-4x/.

[dipbazz]

Hey @omeraplak, when I use the icons on sidebar menu the icons are displayed but still I get the error message in my console. Am I missing something?

For your reference I have upgraded my refine package to the latest.

 "@refinedev/core": "^4.10.0",

[aliemir]

Hey @dipbazz, can you try adding the icon to meta of the resource? Check out the docs https://refine.dev/docs/api-reference/core/components/refine-config/#icon

[dipbazz]

Hey @aliemir, I have tried that as well but still the same issue.

[aliemir]

Sorry for the issue @dipbazz, reopened it. We're investigating the issue, hopefully we'll have a release with a fix in no time.

[dipbazz]

Waiting for the fix @aliemir.

[BatuhanW]

Hello @dipbazz, we couldn't reproduce the issue, here I created a simple react component and passing it as icon both in the root and meta, didn't get any error.

Could you provide us a minimal reproducible example? Sorry for the inconvenience.

[dipbazz]

Hey @BatuhanW, I have tried to reproduce the issue in codesandbox but couldn't get the error as of my project. I will try to reproduce the issue as soon as I get some time, sorry for my time constraint.

[BatuhanW]

Hello @dipbazz do you still have this issue?

[dipbazz]

Hey @BatuhanW, yes I have still this issue in my codebase.

Uncaught (in promise) TypeError: cyclic object value
    perform server.ts:96
    transport client.ts:74
    cerbos client.ts:720
    checkResources client.ts:305
    checkResource client.ts:252
    can App.tsx:103
    _ index.tsx:139
    node_modules bundle.js:53550
    node_modules bundle.js:53550
    node_modules bundle.js:53550
    React 13
    performReactRefresh react-refresh-runtime.development.js:304
    performReactRefresh react-refresh-runtime.development.js:293
    node_modules bundle.js:41002
    setTimeout handler*enqueueUpdate RefreshUtils.js:83
    executeRuntime RefreshUtils.js:243
    $ReactRefreshModuleRuntime$ main.232387debf181f288a05.hot-update.js:1568
    tsx main.232387debf181f288a05.hot-update.js:1581
    factory react refresh:6
    Webpack 18
server.ts:96
Uncaught (in promise) TypeError: cyclic object value
    perform server.ts:96
    transport client.ts:74
    cerbos client.ts:720
    checkResources client.ts:305
    checkResource client.ts:252
    can App.tsx:103
    _ index.tsx:139
    node_modules bundle.js:53550
    node_modules bundle.js:53550
    node_modules bundle.js:53550
    React 14
    node_modules bundle.js:560210
    notifyFn notifyManager.ts:15
    node_modules bundle.js:560221
    node_modules bundle.js:560220
    batchNotifyFn notifyManager.ts:18
    node_modules bundle.js:560219
    promise callback*scheduleMicrotask utils.ts:414
    flush notifyManager.ts:60
    batch notifyManager.ts:29
    dispatch query.ts:588
    fetch query.ts:422
    executeFetch queryObserver.ts:327
    fetch queryObserver.ts:311
    refetch queryObserver.ts:283
    node_modules bundle.js:53272
    React 10
server.ts:96

[dipbazz]

Hey @BatuhanW @omeraplak,

I have figured out the problem regarding this issue. The problem is related to kbar being used in OffLayoutArea on the Layout component. Whenever I remove the code using kbar in my OffLayoutArea the error goes away. Here is the codesandbox demo that replicates my issue codesandbox demo

I hope this helps to identify the issue.

<Layout
      Sider={Sider}
       Header={Header}
       // OffLayoutArea={OffLayoutArea}  ==> this is where I get cyclic error 
      Footer={Footer}
>
        <Outlet />
</Layout>

# components/offLayoutArea.tsx

import React from "react";
import { RefineKbar } from "@refinedev/kbar";

export const OffLayoutArea: React.FC = () => {
  return <RefineKbar />;
};

[BatuhanW]

Thanks for the effort @dipbazz! We'll check it soon.