Hello, I would love to use the existing express server provided in the server.js that runs remix to additionally run a RESTful API that I provide via typescript files. How possible is this at the moment?
#Using remix with express and typescript
tawny trench
late quarry
there's nothing stopping it, you have full access to Express
tawny trench
Well when I have a regular server.js and I want to use a method declared in a typescript file, for example located in ./apps/api/routes.ts with the registerRoutes() method, then this error is thrown
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"
I've seen a couple workarounds for this online but i'm wondering if I'm missing something first
late quarry
You'll need to either build the typescript into JS or run it with something that supports ts, like tsx
rename the server.js to server.ts and replace node with tsxin your package.json scripts for dev and start are what I do
tawny trench
If I remove the type: module declaration from my package json and execute the server.js with ts-node --esm, then this error pops up
Error: Error loading Remix config at /Users/tobiasgrether/Documents/work/nethergames/Inventory/remix.config.js SyntaxError: Unexpected token 'export'
Hmm thats what i tried too, it still complains about the config though
late quarry
that error means it's looking for commonjs require() statements because you've removed the type: module
tawny trench
if I rename the config from remix.config.js to remix.config.ts everything works except that the "/" route doesn't work anymore, it shows a blank page and no loader function is triggered
tawny trench
that error means it's looking for commonjs `require()` statements because you'v...
Wasn't I supposed to?
tawny trench
Because when I add back type: module then it complains about the unknown ts file extension again
late quarry
even with a typescript server.ts?
late quarry
what complains?
tsx should work with that out of the box
I assume ts-node would but I've never used it
tawny trench
Ah hmm tsx seems to get that working a bit better
I now have added the following to my server.ts:
import registerRoutes from "./app/api/routes";
...
registerRoutes(app)
which corresponds to
# app/api/routes.ts
export default function registerRoutes(app) {
...
}
Which from my understanding should work just fine. WebStorm also says that its perfectly fine, however tsx errors out on startup with this error
ReferenceError: Method is not defined
at registerRoutes (file:///Users/tobiasgrether/Documents/work/nethergames/Inventory/app/api/routes.ts:1:176)
at file:///Users/tobiasgrether/Documents/work/nethergames/Inventory/server.ts:1:958
This doesn't seem to work for a named import either
Other than that everything else is working
tawny trench
Turns out this was related to an enum that I declared using export declare enum .... Removing the declare part fixed this
round crane
Regarding the ERR_UNKNOWN_FILE_EXTENSION error, turns out it's a node 20 issue, downgrade to node 18 should resolve it https://github.com/TypeStrong/ts-node/issues/1997
civic pond
If you want to use Remix express with typescript, xHomu's repo has an awesome starter template;
its basically what you would get from the remix CLI, but with small changes to make the typescript work; fairly unopinionated and nice ❇️
