Absolute paths does not work with tsconfig.json

[kimizuy]

I set up absolute paths with tsconfig.json.
I got error "Module not found: Can't resolve '@/components/header' in ~".

Reproduce: repo

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── src
│   ├── components
│   │   └── header.tsx
│   └── pages
│       └── index.tsx
├── tsconfig.json
└── yarn.lock

tsconfig.json:

{
  "compilerOptions": {
    ...

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
 ...
}

src/pages/index.tsx:

import Header from '@/components/header'

export default function Home() {
  return (
    <div>
      <Header />
    </div>
  )
}

Is there anything wrong with that?
Do I need any other settings?

[kimizuy]

I didn't publish repo 😆
And I added experimental flag jsconfigPaths: true to next.config.js.
It worked.

Is this required for absolute paths with tsconfig.json ?

[kimizuy]

It's related #10929.
It doesn't seem to be a good fit with TypeScript.

There are two solutions at the moment.

1. Add experimental flag jsconfigPaths: true
2. Use yarn link protocol

[timneutkens]

You're likely on an old version of Next.js given that this feature was released to stable already, no flag required.

[kimizuy]

It was a very elementary mistake !!
Thank you very much.