Тип элемента JSX «<Component>» не содержит ошибок конструкции или сигнатур вызовов И БОЛЬШЕ

Я уже несколько дней бьюсь головой о стену, поэтому отдаю себя на милость людям, которые умнее меня.

(Извините за длину... Я стараюсь быть подробным)

В настоящее время я работаю над небольшим приложением, в котором использую библиотеку компонентов, которую разрабатываю сам. Я подключаюсь к библиотеке локально, используя "@name/library": "link:/path/to/library" в package.json моего приложения. Я экспортирую компоненты из библиотеки, используя файлы стволов (ненавидьте меня, если хотите). Я также использую накопительный пакет в качестве сборщика библиотеки. Начиная с библиотечного компонента, они выглядят так:

library/src/components/FormElements/FormTextInput.tsx

import FormInputLabel from './FormInputLabel';

type FormTextInputProps = {
  label?: string;
  name?: string;
  type?: 'text' | 'password' | 'number';
  labelPos?: 'left' | 'right' | 'above' | 'below';
  value?: string | number;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

const FormTextInput: React.FC<FormTextInputProps> = ({
  label = '',
  name = '',
  type = 'text',
  labelPos = 'left',
  value = '',
  onChange
}) => {
  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(e);
  };

  return (
    <div>
      {labelPos === 'left' || labelPos === 'above' ? (
        <FormInputLabel position = {labelPos} name = {name} label = {label} />
      ) : (
        ''
      )}
      <input
        value = {value}
        type = {type}
        name = {name}
        id = {name}
        onChange = {onChangeHandler}
      />
      {labelPos === 'right' || labelPos === 'below' ? (
        <FormInputLabel position = {labelPos} name = {name} label = {label} />
      ) : (
        ''
      )}
    </div>
  );
};

export default FormTextInput;

library/src/components/FormElements/index.ts

export { default as FormInputLabel } from './FormInputLabel';
export { default as FormTextInput } from './FormTextInput';

library/src/components/index.ts

export * from "./FormElements";

library/src/index.ts

export * from "./components";

Вот компонент в моем приложении, который его использует (свернут):

MovieEditor.tsx

import { useQuery, useMutation } from '@apollo/client';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { GET_MOVIE } from './queries';
import { ADD_MOVIE, UPDATE_MOVIE } from './mutations';
import FormTextInput from '@name/library'; <-- No complaints about import

.......

const MovieEditor: React.FC = () => {
  
     ...........

  return (
    <>
      <h3 className = "text-lg font-semibold p-4">Create/Update Movie</h3>
      <FormTextInput label = "Not Working" /> <-- Errors here
      <form ...
      </form>
    </>
  );
};

export default MovieEditor;

Вот ошибки, которые я получаю: обе в одной строке:

• Тип элемента JSX «FormTextInput» не имеет какой-либо конструкции или подписи вызова.ts(2604)
• «FormTextInput» нельзя использовать как компонент JSX. Его тип 'typeof import("/home/collin/Git/phantomartist/dist/index") не является допустимым элементом JSX type.ts(2786).

Не знаю, поможет ли это, но вот мой rollup.config.mjs файл:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
    ],
  },
  {
    input: "dist/ems/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

И мой package.json за библиотеку:

{
  "name": "@name/library",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/name"
  },
  "version": "0.0.0",
  "type": "module",
  "module": "dist/ems/index.js",
  "main": "dist/cjs/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "scripts": {
    "rollup": "rollup -c",
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-terser": "^0.4.4",
    "@stylexjs/stylex": "^0.7.5",
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "react": "^18.3.1",
    "rollup": "^4.18.0",
    "rollup-plugin-dts": "^6.1.1",
    "tslib": "^2.6.3",
    "typescript": "^5.2.2",
    "vite": "^5.3.1"
  },
  "peerDependencies": {
    "react": "^18.3.1"
  }
}

Когда я пытаюсь import FormTextInput from '@name/library/src/components/FormElements/FormTextInput.tsx, это работает как чемпион.

Я испробовал все возможные варианты изготовления этих напильников. Я 1000 раз проверял орфографию (очень надеюсь, что проблема не в этом 😅). Я погуглил и попробовал все предложения на свете. Кодеум не очень помог — просто говорит мне сделать то, что я уже пробовал.

И если вы знаете лучший способ сделать то, что я собираюсь сделать, не стесняйтесь передать и это мне.

Пожалуйста! Кто-то! Будь моим героем!