Can't export TimeField from my component library (Storybook)

[Denni5]

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

package.json dependencies:

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

peerDependencies :

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

[reidbarber]

Can you provide a bit more information about what build tool you're using? I know there have seen similar looking issues with Next.js 12, like this: #4894

[Denni5]

that's the build process:

package.json

  "scripts": {
    "build-lib": "ts-node scripts/build.ts",
    

scripts/build.ts

const step3 = () => {
  console.log("[i] Building TypeScript...");
  execSync("tsc -p tsconfig.build.json");
  console.log("[i] Done building TypeScript");
};

tsconfig.build.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": false,
    "jsx": "react-jsx",
    "declaration": true,
    "outDir": "./lib"
  },
  "include": ["src"],
  "exclude": [
    "**/*.stories.*",
    "**/*.test.*",
    "*/storybook/*",
    "*/test/*",
    "*/react-app-env.d.ts",
    "*/setupTests.ts",
    "*/components/tools/**"
  ],
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

[reidbarber]

What about your bundler? (Webpack, parcel, etc?)

[Denni5]

it's webpack

[reidbarber]

I'm not aware of any issues solutions. If you can reproduce it in Stackblitz, it may be easier for others to investigate. Other than that, I recommend upgrading deps like webpack, clearing caches, etc.