TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

[suchcodemuchwow]

Hi I'm not entirely sure how to handle this error when I use immer with zustand. There is nothing wrong with the runtime but compiler yells at me with the following error:

TS2742: The inferred type of useWorkflowEditorStore cannot be named without a reference to .pnpm/[email protected]/node_modules/csstype. This is likely not portable. A type annotation is necessary.
TS4023: Exported variable useWorkflowEditorStore has or is using name WritableDraft from external module
'/Users/dev/Development/active-projects/lurch/node_modules/.pnpm/[email protected]/node_modules/immer/dist/immer'
but cannot be named.
TS4023: Exported variable useWorkflowEditorStore has or is using name internalsSymbol from external module
'/Users/dev/Development/active-projects/lurch/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@reactflow/core/dist/esm/types/nodes'
but cannot be named.
TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

with the following code:

import { create } from 'zustand';
import {
  Connection,
  Edge,
  EdgeChange,
  Node,
  NodeChange,
  addEdge,
  applyNodeChanges,
  applyEdgeChanges,
  XYPosition,
  MarkerType,
} from 'reactflow';

import { TbBolt, TbCalendarBolt, TbCamera } from 'react-icons/tb';
import { immer } from 'zustand/middleware/immer';

export const useWorkflowEditorStore = create<{
  id: number;
  nodes: Node[];
  edges: Edge[];
  loading: boolean;
  loadWorkflow: (id: string) => void;
  onNodesChange: (changes: NodeChange[]) => void;
  onEdgesChange: (changes: EdgeChange[]) => void;
  onConnect: (connection: Connection) => void;
  onDrop: (type: string, position: XYPosition) => void;
  setNodes: (nodes: Node[]) => void;
  setEdges: (edges: Edge[]) => void;
  deleteEdge: (id: string) => void;
  deleteNode: (id: string) => void;
}>()(
  immer((set) => ({
    id: 0,
    nodes: [],
    edges: [],
    loading: false,
    loadWorkflow: async (id: string) => {
      set({ loading: true });

      // Fetch workflow data
      const response = await fetch(`/api/workflows/${id}`);
      const data = await response.json();

      if (!data) {
        return set({ loading: false });
      }

      set((state) => {
        state.id = data.id;
        state.loading = false;
        state.nodes = data.nodes;
        state.edges = data.edges;
      });
    },
    onNodesChange: (changes: NodeChange[]) => {
      return set((state) => {
        state.nodes = applyNodeChanges(changes, state.nodes);
      });
    },
    onEdgesChange: (changes: EdgeChange[]) => {
      return set((state) => {
        state.edges = applyEdgeChanges(changes, state.edges);
      });
    },
    onConnect: (connection: Connection) => {
      return set((state) => {
        const edge = {
          ...connection,
          type: 'removable',
          markerEnd: {
            type: MarkerType.Arrow,
            width: 30,
            height: 30,
          },
        };

        console.log(edge);
        state.edges = addEdge(edge, state.edges);
      });
    },
    onDrop: (type: string, position: XYPosition) => {
      return set((state) => {
        if (typeof type === 'undefined' || !type) {
          return;
        }

        switch (type) {
          case 'manual-trigger-node': {
            const newNode = {
              id: `${state.id++}`,
              type,
              position,
              data: { label: `Manual Trigger`, icon: TbBolt },
            } as const;

            state.nodes.push(newNode);
            break;
          }
          case 'scheduled-trigger-node': {
            const newNode = {
              id: `${state.id++}`,
              type,
              position,
              data: { label: `Scheduled Trigger`, icon: TbCalendarBolt },
            } as const;

            state.nodes.push(newNode);
            break;
          }
          case 'screenshot-puppet-node': {
            const newNode = {
              id: `${state.id++}`,
              type,
              position,
              data: { label: `Screenshot Puppet`, icon: TbCamera },
            } as const;

            state.nodes.push(newNode);
            break;
          }
          default:
            break;
        }
      });
    },
    setNodes: (nodes: Node[]) => {
      set({ nodes });
    },
    setEdges: (edges: Edge[]) => {
      set({ edges });
    },
    deleteNode: (id: string) => {
      set((state) => {
        state.nodes = state.nodes.filter((node) => node.id !== id);
      });
    },
    deleteEdge: (id: string) => {
      set((state) => {
        state.edges = state.edges.filter((edge) => edge.id !== id);
      });
    },
  })),
);

[dai-shi]

https://tsplay.dev/w194Gw seems working.

Do you install immer?

[dai-shi]

https://tsplay.dev/w194Gw seems working.

No it doesn't.

[dai-shi]

Please someone help on it.