how do you deploy your app? How do you build it? How does your project structure look like? How does the file with the error looks like (esp. share the component beginning)?

- The project's deployed on vercel
- Built by vercel
- App router - normal structure

Example of the file:

"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";

export default function ({
    children,
    href,
    ...props
}: JSX.IntrinsicElements["a"] & { href: string }) {
    const elRef = useRef(null);

    let constrain = 10;

    function transforms(x: number, y: number, el: HTMLElement) {
        let box = el.getBoundingClientRect();
        let calcX = -(y - box.y - box.height / 2) / constrain;
        let calcY = (x - box.x - box.width / 2) / constrain;

        //if the variable are too big, the element will go back to 0 0

        if (calcX > 40) calcX = 40;
        if (calcX < -40) calcX = -40;
        if (calcY > 40) calcY = 40;
        if (calcY < -40) calcY = -40;

        return (
            "perspective(100px) " +
            "   rotateX(" +
            calcX +
            "deg) " +
            "   rotateY(" +
            calcY +
            "deg) "
        );
    }

    function transformElement(
        el: HTMLElement,
        xyEl: [number, number, HTMLElement]
    ) {
        //check if element has class 'active'
        if (!el.classList.contains("active")) {
            el.style.transform = transforms.apply(null, xyEl);
        }
    }

    useEffect(() => {
        const element = elRef.current;

        const listener = window.addEventListener("mousemove", (e) => {
            if (window.innerWidth < 800) return;

            let xy = [e.clientX, e.clientY];
            let position = xy.concat(element ? [element] : []); // Fix: Ensure element is always an array

            window.requestAnimationFrame(function () {
                if (element) {
                    transformElement(
                        element,
                        position as [number, number, HTMLElement]
                    );
                }
            });
        });

        return () => {
            window.removeEventListener("mousemove", listener as any);
        };
    }, []);

    return (
        <Link href={href} target="_blank" ref={elRef} {...props}>
            {children}
        </Link>
    );
}

The error:
Type error: Cannot find namespace 'JSX'.

Change your type declaration to this:

props: {
    href: string
} & Omit<React.ComponentProps<'a'>, "href">

export default async function Home(
    props: {
        href: string;
    } & Omit<React.ComponentProps<'a'>, 'href'>
) {
    
    return (...);
}

Or more beautiful:

type YourType = {
    href: string;
} & Omit<React.ComponentProps<'a'>, 'href'>;

export default async function Home(props: YourType) {
    return (...

...

Oh and of course give your componant a proper name

Please may I remind you that as I mentioned in the question, several built projects cannot be upgraded to the latest versions of next and react solely because they have an enormous amount of files and components which make use of JSX. I want a global fix for this, not one where I have to replace this.

And as I have already mentioned, it can be fixed by simply importing the JSX namespace at the top.

the components name is the filename

I don't see how the name of the component could affect the global JSX namespace disappearing

it seems to be imported fine in VSC upon inspection and development, but not in buildtime

is it all the same in every file so we can find the same fix for all of them?

it indeed is

used for manually importing the element's types mostly

worked fine until the recent updates

and the code is also everywhere the same?

yup

I mean I guess that's a solution 😂

thank you 🙏

but is there anything to fix the JSX issue itself?

of course you can also import it in every file but thats... more complicated and less maintainable...

I just found out that they decided to switch the namespaces around and move JSX to React.JSX and say that the old location is deprecated 😅

I guess that's the solution

just mass replace JSX. with React.JSX. like you said

thanks for your help xD

happy to help

yea and make sure you make it maintainable like I said, so you can easier fix these kind of changes in the fture more easy ^^