TextInput not working neither via dot syntax or neither via explicity importing

[Sameerthe-Big-O]

Property 'Input' does not exist on type 'typeof import("c:/Users/PMYLS/Desktop/next-js-learning/issue-tracker/node_modules/@radix-ui/themes/dist/esm/components/text-field")'

 <TextField.Root>
          <TextField.Input />
        </TextField.Root>

first I tried this approach as well where it wasn't able to infer Input then I searched and saw there was already issue created and answer to import like import { TextField ,TextFieldInput} from "@radix-ui/themes" but this didn't work for me either at this point don't know what to do

there

"dependencies": {
    "@prisma/client": "^5.14.0",
    "@radix-ui/themes": "^3.0.5",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.5",
    "react-icons": "^5.2.1",
    "zod": "^3.23.8"
  },

[vladmoroz]

How are you importing the component exactly?

[Sameerthe-Big-O]

yes exactly what you said in the previous issue my bad this is why I ignored the tutorials so basically the one who was teaching was using this syntax but i looked at the docs and it seems Radix has updated their docs

"use client";
import { TextField, Button } from "@radix-ui/themes";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

// Define the Zod schema
const formSchema = z.object({
  title: z.string().min(1, { message: "Title is required" }),
  description: z.string().min(1, { message: "Description is required" }),
});

// Define TypeScript types for form fields based on the schema
type FormFields = z.infer<typeof formSchema>;

const Page = () => {
  const {
    register,
    handleSubmit,
    control,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<FormFields>({
    resolver: zodResolver(formSchema),
  });

  const onSubmit: SubmitHandler<FormFields> = (data: FormFields) => {
    try {

    } catch (err) {
      setError("root", {
        message: "An unexpected error occurred",
      });
      return;
    }
  };

  return (
    <form
      className="max-w-lg flex-col gap-[20px]"
      onSubmit={handleSubmit(onSubmit)}
    >
      <TextField.Root placeholder="Enter title" {...register("title")}>
      </TextField.Root>
      {errors.title && <p className="text-red-500">{errors.title.message}</p>}

      <Controller
        control={control}
        name="description"
        render={({ field, fieldState: { error } }) => (
          <div>
            <SimpleMDE {...field} />
            {error && <p className="text-red-500">{error.message}</p>}
          </div>
        )}
      />

      <Button disabled={isSubmitting}>Submit new issue</Button>
    </form>
  );
};

export default Page;

[vladmoroz]

Yeah, there was a breaking change at some point with the parts available on the component