absolute imports works fine in VScode but not compiled

[mhesham32]

that is my configs in tsconfig.json file

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

these are recognized by vscode and it auto completes the directories for me but I got this error in the browser and terminal

Module not found: Can't resolve '@src/components/AppHeader' in '/mnt/e/dev/projects/share-thinking/pages'

however, I'm using the latest next package 9.5

[jamesmosier]

On 9.5.2 with my tsconfig.json and pages setup like this, it works:

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

src/pages/index.js

import Test from '@/components/test';

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

src/components/test.js

export default function Test() {
  return <p>test</p>
}

Could you import your AppHeader via import AppHeader from '@/components/AppHeader'; instead of import AppHeader from '@/src/components/AppHeader';?

[mhesham32]

thanks for replying 🙏. it is the same thing when I use import AppHeader from '@/components/AppHeader'; to be clear I set next to latest in package.json when I hover over it It shows the version 9.5 however when I use yarn next -v I got 9.3 what is the right version here could this be the problem if though how to update it.

[jamesmosier]

Change your package.json to "next": "9.5.2" and then run yarn install and try again.