workers-sdk Respect TypeScript path aliases in Wrangler `module-collection`

Which Cloudflare product(s) does this pertain to?

Wrangler

What version of `Wrangler` are you using?

2.13.0

What operating system are you using?

Mac

Describe the Bug

Getting the following module resolution error when resolving a non-standard extension (.graphql) while using TS path aliases.

Please note: this works fine if I don't use the ~/* alias I have configured and use a relative import instead. Just the alias seems to mess up the file resolution.

[ERROR] [plugin wrangler-module-collector] ENOENT: no such file or directory, open '/Users/estrattonbailey/Sites/rainbow/arc/workers/nfts/src/routers/graphql/~/routers/graphql/schema.graphql'

    src/routers/graphql/index.ts:7:19:
      7 │ import schema from '~/routers/graphql/schema.graphql';
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    ../../node_modules/.pnpm/[email protected]/node_modules/wrangler/wrangler-dist/cli.js:130799:19:
      130799 │             build5.onResolve(
             ╵                    ~~~~~~~~~

    at /Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/wrangler/wrangler-dist/cli.js:130799:20
    at Array.forEach (<anonymous>)
    at /Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/wrangler/wrangler-dist/cli.js:130798:22
    at Array.forEach (<anonymous>)
    at setup (/Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/wrangler/wrangler-dist/cli.js:130795:16)
    at handlePlugins (/Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1276:21)
    at buildOrServeImpl (/Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:965:5)
    at Object.buildOrServe (/Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:773:5)
    at /Users/estrattonbailey/Sites/rainbow/arc/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2112:17

I'm importing the following:

import schema from '~/routers/graphql/schema.graphql';
...

Here's my wrangler.toml:

rules = [
  { type = "Text", globs = ["**/*.graphql"], fallthrough = true }
]

And here's my tsconfig.json:

{
  "include": ["src", "env.d.ts"],
  "compilerOptions": {
    "strict": true /* Enable all strict type-checking options. */,
    "target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "lib": [
      "es2021"
    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
    "module": "es2022" /* Specify what module code is generated. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
    "paths": {
      "~/*": ["src/*"]
    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
    "types": [
      "@cloudflare/workers-types"
    ] /* Specify type package names to be included without being referenced in a source file. */,
    "resolveJsonModule": true /* Enable importing .json files */,
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
    "checkJs": false /* Enable error reporting in type-checked JavaScript files. */,
    "noEmit": true /* Disable emitting files from a compilation. */,
    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

Mar 27 '23 20:03 estrattonbailey

Thanks for raising this! It looks like this is a bug with module resolution using the rules key not respecting tsconfig path aliases. We'll get this fixed, but in the meantime the workaround is not to use path aliases from tsconfig when importing modules specified with the rules key.

May 22 '23 15:05 penalosa

This seems to also affect importing from a package without an absolute path:

// This doesn't work
import myModule from "package/file.wasm";
// This does
import myModule from "../node_modules/package/file.wasm";

Dec 27 '23 15:12 malobre

@Malobre Importing from package/file.wasm will work with up to date versions of wrangler, as long as the package exposes file.wasm in their exports map. I dug into this one at https://jross.me/improving-wasm-imports-with-wrangler-and-cloudflare-workers/.