File Extension Substitution for TypeScript Support

[magnusriga]

I am trying to get the enhanced resolver to work with a TypeScript self-reference, both via package.json exports and imports.

When TypeScript looks up modules it deviates from the Node resolver once a path has been found. Specifically, it conducts what is called File Extension Substitution where it takes the path it found from package.json and swaps out the extension with .ts, .tsx, .d.ts, .js. and .jsx, in that order.

It seems enhanced resolver does not do that kind of substitution, is that right? Any way to make it mimic TypeScript's resolution algorithm?

Note: The import resolution works when we change the extensions to .tsx in the exports and imports, but the idea is that the resolver should do extension substitution when it looks for the TS files.

Minimal repo: https://github.com/magnusriga/my-app

Code excerpts follow below.

Importing file:

/* eslint-disable */
const resolve = require("enhanced-resolve");

const myResolve = resolve.create({
  conditionNames: [
    'types',   'import',
    'esm2020', 'es2020',
    'es2015',  'require',
    'node',    'node-addons',
    'browser', 'default'
  ],
  extensions: [
    '.ts',   '.tsx',
    '.d.ts', '.js',
    '.jsx',  '.json',
    '.node'
  ],
  extensionAlias: {
    '.js': [ '.ts', '.tsx', '.d.ts', '.js' ],
    '.jsx': [ '.tsx', '.d.ts', '.jsx' ],
    '.cjs': [ '.cts', '.d.cts', '.cjs' ],
    '.mjs': [ '.mts', '.d.mts', '.mjs' ]
  },
});

// Looking up local file (self reference) via exports
myResolve(__dirname, "my-app/baz", (err, result) => {
  const res1 = result;
  console.log('Resolving my-app/baz :>> ', res1);
});

// Looking up local file (self reference) via imports
myResolve(__dirname, "#app/baz", (err, result) => {
  const res2 = result;
  console.log('Resolving #app/baz :>> ', res2);
});

Local package.json

{
  "imports": {
    "#app/*": "./src/app/*.js" // Works if extension is .tsx
  },
  "exports": {
    "./*": "./src/app/*.js" // Works if extension is .tsx
  },
}

export const Baz = ({baz}: {baz: string}) => {
  return <div>{baz}</div>
}