Relative import paths need explicit file extensions in ECMAS cript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

1 minute read | a month ago

When I was working on a monorepo using turbo repo I frequenly encountered this error

path/to/file/index.tsx:5:42 - error TS2834: Relative import paths need explicit file extensions in ECMAS
cript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

whenever I wanted to build the project. Sometimes after spending so much times tweaking some things, it works magically. But then later (probably months later) I came to realize that the issue was that, one of my packages(ui) was including some of the components from the app(web)

{
  "extends": "@sms/typescript-config/react-library.json",
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@sms/ui/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    ".",
    "../../apps/web/src/components/foo/index.tsx",
    "../../apps/web/src/components/foo-bar/index.tsx",
    "../../apps/web/src/components/bar/index.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

After changing it to this

{
  "extends": "@sms/typescript-config/react-library.json",
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@sms/ui/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "."
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Everything worked fine