import/extensions - Missing file extension "ts"

[sekhavati]

I'm attempting an upgrade of XO from version 0.43 -> 0.47 and a particular lint rule is erroring wherever local code files are imported:

import { FOO } from "./constants";
   => Missing file extension "ts" for "./constants"    import/extensions

import { logger } from "./logger";
   => Missing file extension "ts" for "./logger"       import/extensions

etc...

Adding a .ts file extension to the import path causes a TypeScript (v4.5.4) compile error:

TS2691: An import path cannot end with a '.ts' extension. Consider importing './logger' instead.

Is there something obvious I'm missing or should this work out of the box with XO?

For context in case it matters, this is a monorepo where every package has a tsconfig.json that extends the root level one, eg:

./repo
├── packages
│   ├── foo
│   │   └── tsconfig.json

|   ├── bar
│   │   └── tsconfig.json
├── tsconfig.json

Root level tsconfig.json:

{
  "extends": "@tsconfig/node14/tsconfig.json",
  "compilerOptions": {
    "resolveJsonModule": true
  },
  "exclude": [
    "node_modules",
    "**/node_modules",
    "**/infra",
    "**/*.spec.ts",
    "**/*.test.ts",
    "**/jest.config.ts",
    "**/__mocks__"
  ]
}

Package level tsconfig.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./build",
  }
}

[sindresorhus]

TS2691: An import path cannot end with a '.ts' extension. Consider importing './logger' instead.

It's the TS error that is incorrect. It should say that you have to add a .js extension.

[sindresorhus]

You also have to ensure your project is native ESM. Make sure you read the release notes for all the XO versions you skipped.

https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[andersk]

For those using eslint-import-resolver-typescript, there’s an open issue for this problem:

• when using typescript recommended config it should allow for imports of js equivialent import-js/eslint-plugin-import#2111