Exported variable 'Some-Element-withRef' has or is using name 'UNDEFINED_VOID_ONLY' from external module "mono-repo-root/node_modules/@types/react/canary" but cannot be named

[PaulSinghDev]

Description

When using plate as a package within an Monorepo it seems to have issues passing type verification when the types defined for react/canary are not in the same repo as the Plate library.

Steps to Reproduce

• Setup TS based Turbo repo: https://turbo.build/repo/docs/getting-started/create-new
• Add Plate as a package
• Use plate in your frontend with one of the elements which use withRef or withHOCC (basically one which passes ref down the tree)
• Try to make a prod build

Repo

https://github.com/PaulSinghDev/plate-js-issue

Sandbox

Link to CodeSandbox

Expected Behavior

The app builds

Environment

• slate: ^0.102.0
• slate-react: ^0.102.0

Solution

Is to type the elements before exporting them.

Current HrElement:

import React from 'react';
import { cn, withRef } from '@udecode/cn';
import { PlateElement } from '@udecode/plate-common';
import { useFocused, useSelected } from 'slate-react';

export const HrElement = withRef<typeof PlateElement>(
  ({ className, nodeProps, ...props }, ref) => {
    const { children } = props;

    const selected = useSelected();
    const focused = useFocused();

    return (
      <PlateElement ref={ref} {...props}>
        <div className="py-6" contentEditable={false}>
          <hr
            {...nodeProps}
            className={cn(
              'h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content',
              selected && focused && 'ring-2 ring-ring ring-offset-2',
              className
            )}
          />
        </div>
        {children}
      </PlateElement>
    );
  }
);

After update (compiling):

import React from "react";
import { cn, withRef } from "@udecode/cn";
import { PlateElement } from "@udecode/plate-common";
import { useFocused, useSelected } from "slate-react";

// Stpre a type def
type HrType = typeof PlateElement;

// Provide the typedef for this component
export const HrElement: ReturnType<typeof withRef<HrType>> = withRef<HrType>(
  ({ className, nodeProps, ...props }, ref) => {
    const { children } = props;

    const selected = useSelected();
    const focused = useFocused();

    return (
      <PlateElement ref={ref} {...props}>
        <div className="py-6" contentEditable={false}>
          <hr
            {...nodeProps}
            className={cn(
              "h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content",
              selected && focused && "ring-2 ring-ring ring-offset-2",
              className
            )}
          />
        </div>
        {children}
      </PlateElement>
    );
  }
);

With the change above it seems to compile

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified