'redirectSymbol' introduced in #12527 causes type error

[dantrain]

I'm using React Router as a...

framework

Reproduction

Run tsc

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 139.30 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: 9.15.0 - ~/Library/pnpm/pnpm
    Watchman: 2024.10.07.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 18.1.1

Used Package Manager

pnpm

Expected Behavior

No type errors

Actual Behavior

Received error:

error TS4058: Return type of exported function has or is using name 'redirectSymbol' from external module "/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/route-data-aSUFWnQ6" but cannot be named.

export async function loader({ request, context }: Route.LoaderArgs) {

[penspinner]

I am also encountering this TypeScript issue. This error occurs when any functions return a redirect call.

Here is my related Discord message + thread: https://discord.com/channels/770287896669978684/1319889604211511384.

Here are my TypeScript configs:

tsconfig.json

{
    "files": [],
    "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.vite.json" }],
    "compilerOptions": {
        "forceConsistentCasingInFileNames": true,
        "isolatedModules": true,
        "skipLibCheck": true,
        "strict": true,
        "noEmit": true,
        "paths": {
            "~/*": ["./app/*"]
        }
    }
}

tsconfig.node.json

{
    "extends": "./tsconfig.json",
    "include": [
        "react-router.config.ts",
        "tailwind.config.ts",
        "vite.config.ts",
        "vitest.workspace.ts",
        "prisma/**/*.ts"
    ],
    "compilerOptions": {
        "composite": true,
        "strict": true,
        "types": ["node"],
        "lib": ["ES2022"],
        "target": "ES2022",
        "module": "NodeNext",
        "moduleResolution": "NodeNext"
    }
}

tsconfig.vite.json

{
    "extends": "./tsconfig.json",
    "include": [
        ".react-router/types/**/*",
        "app/**/*",
        "app/**/.server/**/*",
        "app/**/.client/**/*",
        "server/**/*",
        "env.d.ts",
        "tests/**/*.ts",
        "types.ts"
    ],
    "compilerOptions": {
        "composite": true,
        "lib": ["DOM", "DOM.Iterable", "ES2022"],
        "types": ["vite/client"],
        "target": "ES2022",
        "module": "ES2022",
        "moduleResolution": "bundler",
        "jsx": "react-jsx",
        "baseUrl": ".",
        "rootDirs": [".", "./.react-router/types"],
        "typeRoots": ["public/node_modules/@types", "./node_modules"],
        "esModuleInterop": true,
        "resolveJsonModule": true
    }
}

[penspinner]

@pcattori Likely has something to do with this PR here: #12527.

[pcattori]

I can't reproduce this locally. Could you share a repro on stackblitz or github?

[penspinner]

@pcattori I figured out that the issue occurs when the tsconfig.json.compilerOptions has composite: true.

[dantrain]

@pcattori here's a branch of the repo where I'm encountering this issue.

As @penspinner observed, it is happening when a redirect is returned from a loader/action. I don't seem to have composite: true in my tsconfig.

Presumably I could get around this by throwing the redirect instead of returning it, but the docs seem to encourage returning.

[10xsai]

@pcattori Hi, facing same issue with RR7 as framework. When i am removing return from redirect, the error is going away. This is the exact message

Return type of exported function has or is using name 'redirectSymbol' from external module "/home/sai/MyProject/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/route-data-aSUFWnQ6" but cannot be named.ts(4058)

[AdiRishi]

Experienced the same thing.

@pcattori if you want a very minimal reproduction repository, made one here - https://github.com/AdiRishi/rr7-redirect-ts-bug

The error can be seen by running npm run typecheck or going to the app/routes/redirect-to-home.tsx file.

[m-muiznieks]

I have exactly the same issue. :/

[pcattori]

@AdiRishi looking at your reproduction (https://github.com/AdiRishi/rr7-redirect-ts-bug), I commented out declaration, declarationMap, and sourceMap from your tsconfig.json since a React Router app is not a library and does not need generated type declarations. In fact, any settings of tsconfig.json that solely affect compilation output are irrelevant as React Router only uses tsc for typechecking and instead uses Vite for compilation.

@dantrain looks like your @remix-relay/typescript-config package also sets these options. You should be able to override them to false in your remix.json if you want to keep base.json as is.

Closing since those were the two reproductions provided so far, but if anyone disagrees with my reasoning or has a reproduction without compiler-only settings like declaration, declarationMap, or sourceMap, then I'm happy to reopen this and continue discussion.

[iamtomcat]

I'm currently running into this without any of those settings. I don't have a reproducible version at the moment. I'll try and make a version in the next few days.

[dantrain]

Thank you for looking into this @pcattori, I overrode these as you suggested and the problem is solved for me.

I wondered why I had added these library only options to my base tsconfig.json in the first place. It seems these are present in the boilerplate when setting up a monorepo using the Turborepo command create-turbo@latest, see here. Hopefully this helps anyone with a similar issue.

[penspinner]

@pcattori

I tried setting sourceMap, declaration, and declarationMap to false in my tsconfig.vite.json. It's telling me that:

Composite projects may not disable declaration emit.

https://www.typescriptlang.org/tsconfig/#composite

I'm using project references and it requires composite setting to be enabled. TypeScript project references is used in the Node Custom Server React Router template.

[jfsiii]

I have the same issue/constraint @penspinner mentioned.

For now, I'm working around it using the same code react-router does but without the problematic bit.

Response.redirect(url, status) works in most/simple cases but there are some times we're also passing other headers.

I also considered using data(null, { headers: { location: url, status }) but since react-router is using new Response I stuck with that.

[jack-r-warren]

Also arrived here from the templates. A minimal reproduction:

npx create-react-router@latest ./reproduction \ 
  --template remix-run/react-router-templates/node-custom-server --yes

Edit ./reproduction/app/routes/home.tsx:

+ import { redirect } from "react-router";

  export async function loader({ context }: Route.LoaderArgs) {
+   return redirect("example.org");

TypeScript error on loader:

Return type of exported function has or is using name 'redirectSymbol' from external module "<redacted>/reproduction/node_modules/react-router/dist/development/route-data-aSUFWnQ6" but cannot be named. ts(4058)