tsconfig.json: Custom IntrinsicElements not working

[roger067]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/blazing-sound-r4snjy

To Reproduce

Here an example link: https://codesandbox.io/p/devbox/blazing-sound-r4snjy

Current vs. Expected behavior

I have an embeddable form component, where i import a script and call a tag in home.tsx.However, I am encountering the following error: Property 'pb-embeddable-form' does not exist on type 'JSX.IntrinsicElements'. I created pb-embeddable-form.d.ts in root folder and declare the following type:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'pb-embeddable-form': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & {
        id: string;
      };
    }
  }
}

I also added the d.ts into includes array on tsconfig.json:

  "include": [
    "next-env.d.ts",
    "pb-embeddable-form.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],

The component renders on screen but appears the Hydration error and TypeError every render. I want to avoid the typescript error and pb-embed-form should be a valid IntrinsicElements. I do not put the script tag with the source component in codesandbox example because its a private project

Provide environment information

This is a Next.js project called "page-form" set up with TypeScript. Here's a summary of the project:

Project Structure:
- It's a Next.js application (version 15.1.7)
- Uses TypeScript for type safety
- Uses React 19 and React DOM 19
- Has ESLint configured for code linting

Available Scripts:
- `npm run dev`: Starts the development server
- `npm run build`: Creates a production build
- `npm run start`: Starts the production server
- `npm run lint`: Runs ESLint for code linting

Key Project Files:
- `/pages`: Contains the Next.js page components
- `/public`: Static assets directory
- `/styles`: Stylesheet directory
- `.next`: Build output directory
- `next.config.ts`: Next.js configuration file
- `tsconfig.json`: TypeScript configuration
- `eslint.config.mjs`: ESLint configuration
- `pb-embeddable-form.d.ts`: TypeScript declaration file for form components

The project appears to be focused on creating an embeddable form component, as suggested by the presence of the `pb-embeddable-form.d.ts` file.

Which area(s) are affected? (Select all that apply)

TypeScript

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response