File extension substitution is not working

[magnusriga]

Hi,

Thanks for a solid resolver. I am having an issue though, please see below.

According to the ts docs:

For any module specifier that would, according to the moduleResolution algorithm specified, trigger a lookup of a JavaScript file in the runtime or bundler, TypeScript will first try to find a TypeScript implementation file or type declaration file with the same name and analagous file extension.

However, the below file and corresponding package.json (minimal repo here) throws this error:

Unable to resolve path to module '#app/bar'.eslint(import/no-unresolved)

File Excerpts

// foo.tsx
import { Bar } from "#app/bar"; // Resolved by TS, but lacking Intellisense (ctrl+space suggestions). ESLint import/no-unresolved rule also throws an error.
import { Baz } from "my-app/baz"; // Resolved by TS, but lacking Intellisense (ctrl+space suggestions). ESLint import/no-unresolved rule also throws an error.
import { Qux } from "./qux"; // Resolved by TS. Also works with Intellisense (ctrl+space suggestions), and eslint import/no-unresolved rule.

export const Foo = () => {
  return (
    <>
      <Bar bar="bar" />
      <Baz baz="baz" />
      <Qux qux="qux" />
    </>
  );
};

// bar.tsx
export const Bar = ({bar}: {bar: string}) => {
  return <div>{bar}</div>
}

// package.json
{
...
 "name": "my-app",
  "imports": {
    "#app/*": "./src/app/*.js"
  },
  "exports": {
    "./*": "./src/app/*.js"
  },
...

I am using "typescript": "5.5.0-dev.20240314". Typescript finds the file, so it is only the import resolver that cannot find it.

The error disappears if we change .js to .tsx in package.json, however that is not recommended practice. The TypeScript docs are very clear on the point that the package config should point to the output JS file(s), not the input TS files. Otherwise, the app might not work runtime, when consumed.

Any idea what is going on?

[JounQin]

Sorry I'm focusing on un-ts/eslint-plugin-import-x#41 recently, so I don't have enough time to investigate in depth.

We're using enhanced-resolve, if you can help to debug, that would be appreciated.

[magnusriga]

Got it @JounQin , but just quickly: Does the resolver not do file extension substitution, like TS does?

[JounQin]

I believe it depends on enhanced-resolve's algorithm first, I'm not sure whether it's controlled by us.

See also https://github.com/import-js/eslint-import-resolver-typescript/blob/master/src/index.ts#L39-L60

We have othe resolutions for path mapping at

eslint-import-resolver-typescript/src/index.ts

Line 306 in 9e24e10

if (isJs) {

[magnusriga]

@JounQin I looked into it and can confirm that it is indeed enhanced-resolver that is responsible for # imports and exports, in the eslint-import-resolver-typescript plugin. The code you added on top mainly tackles relative paths and the paths field in tsconfig, if I am not mistaken. I have posted a bug request here: webpack/enhanced-resolve#413