🐛 BUG: `wrangler pages dev` cannot resolve custom paths defined in `functions/tsconfig.json`

[pyk]

What version of Wrangler are you using?

2.1.13

What operating system are you using?

Mac

Describe the Bug

1. Go to CodeSanbox
2. Run the following command pnpm wrangler pages dev public

Expected results:

1. ~/templates/home should be resolved to templates/home/index.tsx
2. ~/atoms/box should be resolved to atoms/box/index.tsx.

Got:

1. ~/templates/home is resolved to templates/home/index.tsx
2. ~/atoms/box is not resolved to atoms/box/index.tsx.

Error:

Compiling worker to "/tmp/functionsWorker-0.18508576161414148.js"...
✘ [ERROR] Could not resolve "~/atoms/box"

    templates/home/index.tsx:4:16:
      4 │ import Box from "~/atoms/box";
        ╵                 ~~~~~~~~~~~~~

  You can mark the path "~/atoms/Box" as external to exclude it from the bundle,
  which will remove this error.

1 error(s) and 0 warning(s) when compiling Worker.

✘ [ERROR] Build failed with 1 error:

  templates/home/index.tsx:4:16: ERROR: Could not resolve "~/atoms/box"

Edit:

The project is compiled succesfully with:

tsc -p functions/tsconfig.json

but failed when running it with wrangler.

[GregBrimble]

Thanks for the report and excellent reproduction example. I've confirmed this is a bug.

This doesn't work:

// functions/tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2021",
    "lib": ["ES2021"],
    "jsx": "react",

    /* Modules */
    "module": "CommonJS",
    "moduleResolution": "node",
    "baseUrl": "../",
    "paths": {
      "~/*": ["*"]
    },
    "resolveJsonModule": true,

    /* JavaScript Support */
    "allowJs": true,
    "checkJs": true,

    /* Emit */
    "noEmit": true,

    /* Interop Constraints */
    "esModuleInterop": true,
    "isolatedModules": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noUnusedLocals": true,
    "types": ["@cloudflare/workers-types"]
  },
  "include": ["../atoms/**/*.tsx", "../templates/**/*.tsx"]
}

And this does:

// tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2021",
    "lib": ["ES2021"],
    "jsx": "react",

    /* Modules */
    "module": "CommonJS",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "~/*": ["*"]
    },
    "resolveJsonModule": true,

    /* JavaScript Support */
    "allowJs": true,
    "checkJs": true,

    /* Emit */
    "noEmit": true,

    /* Interop Constraints */
    "esModuleInterop": true,
    "isolatedModules": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noUnusedLocals": true,
    "types": ["@cloudflare/workers-types"]
  },
  "include": ["atoms/**/*.tsx", "templates/**/*.tsx"]
}

We must not be correctly picking up the functions/tsconfig.json. Thanks again for the report. We'll take a look!

[CarmenPopoviciu]

hi @pyk

is still an issue in latest wrangler version (3.62.0)? I'm not able to reproduce locally, and the sandbox you linked to in your description doesn't seem to work anymore

[penalosa]

We haven't heard from you in while so I'm going to close this issue for now. If you're still running into problems feel free to comment with more details and we can investigate further.