I am working on making React Router to work with Deno. In my current setup, I have a workspace with both my backends in Deno, and UI packages to share among projects. One of them is a manually crafted shadcn/ui package, which I just call shadcn.
In case anyone is not familiar with React Router, it has a vite plugin that instructs vite to build to outputs, one is for client and the other is on the server for SSR. The issue I encountered is that:
- My shadcn package is not recognized as an external dependency, so it is bundled into the SSR build
- My shadcn package's dependency, for example
@radix-ui/react-tooltip, is not a dependency on my leaf package. As a result, when the built file is running, it tries to import @radix-ui/react-tooltip, and for better or worse, Deno complains that this package cannot be found.
Vite's doc mentions that linked dependencies are not externalized by default. I am not sure if peer packages in a Deno workspace are recognized as linked dependencies, but even if I set ssr.external to true to externalize even linked dependencies, Vite still bundles my shadcn packages. Explicitly externalizing this package by adding @scope/shadcn to ssr.external: string[] does not work either. The only way out of it is to set ssr.noExternal to true. This makes my build slower and the final package much larger. While it is acceptable in my case, I am still curious if we could make externalization to work in Deno + Vite.
One thing of interest is that, during my building process, I saw the following warnings:
../shadcn/components/separator.tsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
../shadcn/components/tooltip.tsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
../shadcn/components/sheet.tsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
This was seen for both browser build and SSR build. It is interesting because I exclusively use @scope/shadcn in my code, instead of relative imports, but I can still see these relative paths. I am not sure if this might affect vite's externalization.
I am working on making React Router to work with Deno. In my current setup, I have a workspace with both my backends in Deno, and UI packages to share among projects. One of them is a manually crafted shadcn/ui package, which I just call shadcn.
In case anyone is not familiar with React Router, it has a vite plugin that instructs vite to build to outputs, one is for client and the other is on the server for SSR. The issue I encountered is that:
@radix-ui/react-tooltip, is not a dependency on my leaf package. As a result, when the built file is running, it tries to import@radix-ui/react-tooltip, and for better or worse, Deno complains that this package cannot be found.Vite's doc mentions that linked dependencies are not externalized by default. I am not sure if peer packages in a Deno workspace are recognized as linked dependencies, but even if I set
ssr.externalto true to externalize even linked dependencies, Vite still bundles my shadcn packages. Explicitly externalizing this package by adding@scope/shadcntossr.external: string[]does not work either. The only way out of it is to setssr.noExternalto true. This makes my build slower and the final package much larger. While it is acceptable in my case, I am still curious if we could make externalization to work in Deno + Vite.One thing of interest is that, during my building process, I saw the following warnings:
This was seen for both browser build and SSR build. It is interesting because I exclusively use
@scope/shadcnin my code, instead of relative imports, but I can still see these relative paths. I am not sure if this might affect vite's externalization.