Lazy import tsx component

[Ericcwong]

I am trying to lazy import components to help with rendering speeds. When I try to import the file using

const ProductGrid = lazy(() => import("../products/ProductGrid.client") <-- This gives me an error saying, "Cannot find module '../cards/ProductCard.client' or its corresponding type declarations.ts(2307)".

The auto import options that are provided are not tsx files rather .js files.

When I add an tsx at the end this is the error
const ProductGrid = lazy(() => import("../products/ProductGrid.client.tsx") <-- An import path cannot end with a '.tsx' extension. Consider importing '../cards/ProductCard.client.js' instead.ts(2691)

I don't exactly know what is causing this, I believe it is either the vite.config file or typescript.config.

Any ideas?