remove tsconfig aliases

as typescript reuses package.json import config

Author: jansepke

app/components/error-boundary.tsx

@@ -6,7 +6,7 @@ import {
 	useParams,
 	useRouteError,
 } from 'react-router'
-import { getErrorMessage } from '#app/utils/misc'
+import { getErrorMessage } from '#app/utils/misc.tsx'
 
 type StatusHandler = (info: {
 	error: ErrorResponse

app/routes/admin/cache/index.tsx

@@ -8,7 +8,7 @@ import {
 	useSearchParams,
 	useSubmit,
 } from 'react-router'
-import { GeneralErrorBoundary } from '#app/components/error-boundary'
+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { Button } from '#app/components/ui/button.tsx'

app/routes/admin/cache/sqlite.server.ts

@@ -4,7 +4,7 @@ import { cache } from '#app/utils/cache.server.ts'
 import {
 	getInstanceInfo,
 	getInternalInstanceDomain,
-} from '#app/utils/litefs.server'
+} from '#app/utils/litefs.server.ts'
 import { type Route } from './+types/sqlite.ts'
 
 export async function updatePrimaryCacheValue({

app/utils/auth.server.test.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw'
 import { describe, expect, test } from 'vitest'
-import { server } from '#tests/mocks'
+import { server } from '#tests/mocks/index.ts'
 import { consoleWarn } from '#tests/setup/setup-test-env.ts'
 import { checkIsCommonPassword, getPasswordHashParts } from './auth.server.ts'
 

docs/decisions/031-imports.md

@@ -27,21 +27,14 @@ and manually modify.
 Despite the magic of Path aliases, they are actually a standard `package.json`
 supported feature. Sort of.
 [The `"imports"` field](https://nodejs.org/api/packages.html#imports) in
-`package.json` allows you to configure aliases for your imports. It's not
-exactly the same as TypeScript Path aliases, and using them doesn't give you
-autocomplete with TypeScript
-([yet](https://github.com/microsoft/TypeScript/pull/55015)), but if you
-configure both, then you can get the best of both worlds!
+`package.json` allows you to configure aliases for your imports.
+TypeScript also uses this for its own Path aliases since version 5.4
+so you get autocomplete and type checking for your imports.
 
 By using the `"imports"` field, you don't have to do any special configuration
 for `vitest` or `eslint` to be able to resolve imports. They just resolve them
 using the standard.
 
-And by using the `tsconfig.json` `paths` field configured in the same way as the
-`"imports"` field, you get autocomplete and type checking for your imports. This
-should hopefully be temporary until TypeScript supports the `"imports"` field
-directly.
-
 One interesting requirement for `imports` is that they _must_ start with the `#`
 character to disambiguate from other imports. This is a bit annoying, but it's
 something that's not difficult to get used to. They also _must not_ start with
@@ -50,19 +43,14 @@ again it's just a matter of familiarity. So it's no big deal.
 
 ## Decision
 
-We're going to configure `"imports"` in the `package.json` and `paths` in the
-`tsconfig.json` to use path aliases for imports.
+We're going to configure `"imports"` in the `package.json` to use path aliases for imports.
 
 We'll set it to `"#*": "./*"` which will allow us to import anything in the root
 of the repo with `#<dirname>/<filepath>`.
 
 ## Consequences
 
 This is unfortunately _very_ soon after making the decision to drop the alias.
-But I see this as slightly different because we're only using the alias to make
-up for a shortcoming in TypeScript temporarily. Once TypeScript supports the
-`"imports"` field, we can drop the `paths` field and just use the `"imports"`
-standard for Node.js.
 
 If someone wants to use the Epic Stack without Node.js, and their runtime
 doesn't support `package.json` imports (I'm not sure whether other runtimes do

prisma/seed.ts

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker'
 import { prisma } from '#app/utils/db.server.ts'
-import { MOCK_CODE_GITHUB } from '#app/utils/providers/constants'
+import { MOCK_CODE_GITHUB } from '#app/utils/providers/constants.ts'
 import {
 	createPassword,
 	createUser,

tests/e2e/onboarding.test.ts

@@ -4,11 +4,11 @@ import { prisma } from '#app/utils/db.server.ts'
 import {
 	normalizeEmail,
 	normalizeUsername,
-} from '#app/utils/providers/provider'
+} from '#app/utils/providers/provider.ts'
 import {
 	USERNAME_MAX_LENGTH,
 	USERNAME_MIN_LENGTH,
-} from '#app/utils/user-validation'
+} from '#app/utils/user-validation.ts'
 import { readEmail } from '#tests/mocks/utils.ts'
 import {
 	createUser,

tests/playwright-utils.ts

@@ -8,8 +8,8 @@ import {
 	sessionKey,
 } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { MOCK_CODE_GITHUB_HEADER } from '#app/utils/providers/constants.js'
-import { normalizeEmail } from '#app/utils/providers/provider.js'
+import { MOCK_CODE_GITHUB_HEADER } from '#app/utils/providers/constants.ts'
+import { normalizeEmail } from '#app/utils/providers/provider.ts'
 import { authSessionStorage } from '#app/utils/session.server.ts'
 import { createUser } from './db-utils.ts'
 import {

tsconfig.json

@@ -6,8 +6,6 @@
 		"types": ["@react-router/node", "vite/client"],
 		"rootDirs": [".", "./.react-router/types"],
 		"paths": {
-			"#app/*": ["./app/*"],
-			"#tests/*": ["./tests/*"],
 			"@/icon-name": [
 				"./app/components/ui/icons/types.ts",
 				"./types/icon-name.d.ts"