Can't export react-aria's TimeField from my component library (Storybook)

103 Views Asked by At

I am using the useTimeField hook to crate a TimeField-component in my component library with Storybook.

The code is almost the same like in the Example here: https://react-spectrum.adobe.com/react-aria/useTimeField.html

but I was not sure about the Props so I did it like this:

TimeField.tsx

import type { TimeFieldStateOptions } from "react-stately";
import type { Time } from "@internationalized/date";
import classNames from "classnames";
import { useRef } from "react";
import { useLocale, useTimeField } from "react-aria";
import { useTimeFieldState } from "react-stately";
import { Segment } from "./Segment";

export type TimeFieldProps = TimeFieldStateOptions<Time>;

export const TimeField = (props: TimeFieldProps) => {
  const { locale } = useLocale();
  const state = useTimeFieldState({
    ...props,
    locale,
  });

  const ref = useRef(null);
  const { labelProps, fieldProps } = useTimeField(props, state, ref);

  return (
    <div className="timefield">
      {props.label && (
        <label className="mb-1 form-label" {...labelProps}>
          {props.label}
          {props.isRequired && " *"}
        </label>
      )}
      <div
        {...fieldProps}
        ref={ref}
        className={classNames("field form-control", {
          "is-invalid": state.isInvalid,
        })}
      >
        {state.segments.map((segment, i) => (
          <Segment key={i} segment={segment} state={state} />
        ))}
      </div>
    </div>
  );
};

The component is being exported at the top index.ts

export { TimeField, type TimeFieldProps } from "./components/md/TimeField";

It works works fine in Storybook, but when I try to use the component in my Frontend I get this error:

Uncaught TypeError: $kgI3C$swchelperscjs_class_private_field_initcjs._ is not a function

enter image description here

In my component library's package.json I have:

"react-stately": "^3.27.1",
"react-aria": "^3.29.1",

at the dependencies node and...

"@internationalized/date": ">=3.5.0",

at the peerDependencies node.

When I re-create the component in my Frontend it works fine.

0

There are 0 best solutions below