Adding FirebaseUI using the ShadCN tutorial breaks the build

[nat-leo]

[REQUIRED] Describe your environment

• Operating System version: macOS, Sonoma 14.5
• Browser version: Safari 17.5
• Firebase UI version: @firebase-oss/ui-react 7.0.2-beta
• Firebase SDK version: firebase 12.14.0
• Package name: @firebase-oss/ui-react
• VSCode:

Version: 1.119.0 (Universal)
Commit: 8b640eef5a6c6089c029249d48efa5c99adf7d51
Date: 2026-05-05T11:23:50-07:00
Electron: 39.8.8
ElectronBuildId: 13870025
Chromium: 142.0.7444.265
Node.js: 22.22.1
V8: 14.2.231.22-electron.0
OS: Darwin arm64 23.5.0

[REQUIRED] Describe the problem

Running the FirebaseUI tutorial fails when I add the firebase ui. The error seems to stem from the Firebase components trying to import a <Form> that's assumed to be a ShadCN component. However, looking at the ShadCN registry, this <Form> component doesn't exist. There's a <Field>, though!

Steps to reproduce

Run the following initialization:

npx shadcn@latest init --preset b1JBYjbjNI --template vite

Initializes fine

✔ What is your project named? … web
✔ Creating a new Vite project.
✔ Writing components.json.
✔ Checking registry.
✔ Installing dependencies.
✔ Created 2 files:
  - src/components/ui/button.tsx
  - src/lib/utils.ts
✔ Updating src/index.css

Builds fine

npm run build

> web@0.0.1 build
> tsc -b && vite build

vite v8.0.16 building client environment for production...
✓ 125 modules transformed.
computing gzip size...
dist/index.html                                             0.45 kB │ gzip:  0.29 kB
dist/assets/lora-vietnamese-wght-normal-CfJ7gtf3.woff2      8.99 kB
dist/assets/figtree-latin-ext-wght-normal-DCwSJGxG.woff2   10.28 kB
dist/assets/lora-symbols-wght-normal-DQ5VrUkH.woff2        17.24 kB
dist/assets/lora-latin-ext-wght-normal-C2Wlntb9.woff2      20.08 kB
dist/assets/figtree-latin-wght-normal-D_ZTVpCC.woff2       20.15 kB
dist/assets/lora-cyrillic-wght-normal-UWPuZLjM.woff2       21.23 kB
dist/assets/lora-cyrillic-ext-wght-normal-YcVxMP-u.woff2   23.63 kB
dist/assets/lora-math-wght-normal-sOy7rEfW.woff2           29.24 kB
dist/assets/lora-latin-wght-normal-BiLcIKcI.woff2          37.78 kB
dist/assets/index-CBOkTo2o.css                             24.26 kB │ gzip:  5.74 kB
dist/assets/index-BmBeXm8K.js                             225.46 kB │ gzip: 71.32 kB

✓ built in 172ms

Then, I followed the steps in the firebase docs.

// project is named web, but webapp also fails the same way
// web/src/lib/firebase.ts

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_WEB_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGE_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

and components.json has firebase in the registry:

"registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }

Running npx shadcn@latest add @firebase/sign-in-auth-screen will now break the build.

npm run build

> web@0.0.1 build
> tsc -b && vite build

src/components/sign-in-auth-form.tsx:10:25 - error TS2307: Cannot find module 'react-hook-form' or its corresponding type declarations.

10 import { useForm } from "react-hook-form";
                           ~~~~~~~~~~~~~~~~~

src/components/sign-in-auth-form.tsx:11:40 - error TS2307: Cannot find module '@hookform/resolvers/standard-schema' or its corresponding type declarations.

11 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/sign-in-auth-form.tsx:14:80 - error TS2307: Cannot find module '@/components/ui/form' or its corresponding type declarations.

14 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
                                                                                  ~~~~~~~~~~~~~~~~~~~~~~

src/components/sign-in-auth-form.tsx:50:22 - error TS7031: Binding element 'field' implicitly has an 'any' type.

50           render={({ field }) => (
                        ~~~~~

src/components/sign-in-auth-form.tsx:63:22 - error TS7031: Binding element 'field' implicitly has an 'any' type.

63           render={({ field }) => (
                        ~~~~~

src/components/sms-multi-factor-assertion-form.tsx:14:25 - error TS2307: Cannot find module 'react-hook-form' or its corresponding type declarations.

14 import { useForm } from "react-hook-form";
                           ~~~~~~~~~~~~~~~~~

src/components/sms-multi-factor-assertion-form.tsx:15:40 - error TS2307: Cannot find module '@hookform/resolvers/standard-schema' or its corresponding type declarations.

15 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/sms-multi-factor-assertion-form.tsx:17:97 - error TS2307: Cannot find module '@/components/ui/form' or its corresponding type declarations.

17 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
                                                                                                   ~~~~~~~~~~~~~~~~~~~~~~

src/components/sms-multi-factor-assertion-form.tsx:104:22 - error TS7031: Binding element 'field' implicitly has an 'any' type.

104           render={({ field }) => (
                         ~~~~~

src/components/totp-multi-factor-assertion-form.tsx:10:25 - error TS2307: Cannot find module 'react-hook-form' or its corresponding type declarations.

10 import { useForm } from "react-hook-form";
                           ~~~~~~~~~~~~~~~~~

src/components/totp-multi-factor-assertion-form.tsx:11:40 - error TS2307: Cannot find module '@hookform/resolvers/standard-schema' or its corresponding type declarations.

11 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/totp-multi-factor-assertion-form.tsx:13:80 - error TS2307: Cannot find module '@/components/ui/form' or its corresponding type declarations.

13 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
                                                                                  ~~~~~~~~~~~~~~~~~~~~~~

src/components/totp-multi-factor-assertion-form.tsx:50:22 - error TS7031: Binding element 'field' implicitly has an 'any' type.

50           render={({ field }) => (
                        ~~~~~


Found 13 errors.

The primary issue seems to be that Form is not a ShadCN component. There's only <Field> and <form>.

Here's what npx shadcn@latest add @firebase/sign-in-auth-screen adds:

✔ Checking registry.
✔ Installing dependencies.
ℹ Skipped 12 files: (files might be identical, use --overwrite to overwrite)
  - src/components/ui/separator.tsx
  - src/components/ui/card.tsx
  - src/components/ui/input.tsx
  - src/components/ui/button.tsx
  - src/components/policies.tsx
  - src/components/ui/input-otp.tsx
  - src/components/sign-in-auth-form.tsx
  - src/components/sms-multi-factor-assertion-form.tsx
  - src/components/totp-multi-factor-assertion-form.tsx
  - src/components/multi-factor-auth-assertion-form.tsx
  - src/components/multi-factor-auth-assertion-screen.tsx
  - src/components/sign-in-auth-screen.tsx

Here's what Codex said the fix would be, which builds:

Installed:

• react-hook-form
• @hookform/resolvers

Migrated the generated auth forms off the missing @/components/ui/form API and onto shadcn’s current <Field> component API.
Changed these files:

• sign-in-auth-form.tsx
• totp-multi-factor-assertion-form.tsx
• sms-multi-factor-assertion-form.tsx
  What changed:
• Removed imports from @/components/ui/form.
• Replaced FormField with Controller from react-hook-form.
• Replaced:
  • FormItem -> Field
  • FormLabel -> FieldLabel
  • FormDescription -> FieldDescription
  • FormMessage -> FieldError
  • FormControl -> removed; inputs are rendered directly

Kept validation and submit behavior the same.
Verification:
rg found no remaining Form* or @/components/ui/form references in src/components.
npm run build passes.

[just1and0]

Hey @nat-leo - thanks for reporting this, you're right on all counts. The components were importing from @/components/ui/form which no longer exists in the shadcn registry, and react-hook-form / @hookform/resolvers were missing from the registry dependencies.

I've opened a PR to fix this. The fix migrates all form components from the old Form API to shadcn's current Field component and adds the missing npm dependencies to the registry entries.