search

gracile-web / gracile

A thin, full-stack, web framework — Powered by Vite and Lit SSR. Works with Node's HTTP or WHATWG Fetch.
https://gracile.js.org
ISC License
28 stars 1 forks source link

Gracile is incompatible with typescript aliases #3

Closed lschierer closed 3 months ago

lschierer commented 4 months ago

I tried to set up aliases in my tsconfig and the vite section of the gracile.config.ts files to make including the documents easier from routes at variable directory depths, and to my surprise, it blew up in my face.

I set up a minimal reproduction here. If you check that out and run the command pnpm build you will see that it produces the error

12:21:37 AM [vite] Pre-transform error: Failed to load url components/testComponent (resolved id: components/testComponent) in /Users/luke/src/aliasesDemo/src/document.ts. Does the file exist?
12:21:37 AM [vite] Error when evaluating SSR module /src/document.ts: failed to import "components/testComponent"
|- Error: Cannot find module 'components/testComponent' imported from '/Users/luke/src/aliasesDemo/src/document.ts'
....

however pnpm tsc does not complain. I have tried this from memory of how to do so, then when that didn't work, following the directions at both

https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353 and https://www.delasign.com/blog/react-vitejs-typescript-path-alias/ which differ slightly (I tried each way) both from each other and from what I've done in prior projects.

Either way, this ought to work and would make maintaining the route files considerably cleaner.

Thanks!!

JulianCataldo commented 3 months ago

Hi!

Have you tried https://www.npmjs.com/package/vite-tsconfig-paths ?

That's what Remix is using within their Vite React template.

lschierer commented 3 months ago

that got me close, I ended up adding --root . to several of the commands as well, see this commit if curious.

JulianCataldo commented 3 months ago

I tried https://nodejs.org/api/packages.html#subpath-imports they work well with the latest typescript and Node. They work with Vite, too, but only for direct file-to-file mapping it seems, no glob.

Gracile is now a Vite plugin, meaning the Alias thing is just the same as every framework/bare Vite users are facing.

One could source a Vite plugin for doing this. BTW. I think imports maps are better than TS paths.

Closing as it's way out of scope.