(create-next-app) Intellisense does not recognize alias paths

[vicasas]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Sun Nov  6 23:31:09 PST 2022; root:xnu-8020.240.14~1/RELEASE_ARM64_T8110
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

CLI (create-next-app), TypeScript (plugin, built-in types)

Link to the code that reproduces this issue

nolink

To Reproduce

Follow the steps below:

1. Create a new project using npx create-next-app@latest.
2. In the installer questions section, answer the following: ✔ Would you like to use TypeScript with this project? YES ✔ Would you like to use ESLint with this project? NO ✔ Would you like to use Tailwind CSS with this project? NO ✔ Would you like to use src/ directory with this project? YES ✔ Would you like to use experimental app/ directory with this project? NO ✔ What import alias would you like configured? **@/***
3. Go to the src/pages/index.tsx path and try modifying the import styles from '@/styles/Home.module.css' line by removing everything after from to write it manually. When trying to type @/styles the browser's intellisense doesn't find the path in its autocompletion (it doesn't give an error).

Describe the Bug

Code editor intellisense (VS Code) does not recognize aliased path, while it does not give an error resolving the path, it is not visible in editor autocompletion when typing @/styles (even using ctrl+ space).

When creating a new project using the above stepping configuration, a tsconfig.json file is created with the following configuration for the alias.

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

Apparently the previous configuration is what is causing the intelissense of the editor to not be able to help indicate the paths to the @/ writer when importing any component.

Expected Behavior

I hope the editor can suggest which folder or path I want to use when typing @/ when importing a component.

Adding the following additional configuration to the tsconfig.json file seems to fix the problem.

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

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[iamakshatjain]

Basically path, where you want to refer to, takes your baseUrl as the base of the route you are pointing to and baseUrl mandatory reference : https://stackoverflow.com/a/43330003/8520377

[spenserschwartz]

Verified on latest T3 stack as well

@vicasas did you find a solution or workaround?

[vicasas]

@spenserschwartz As I mentioned in the same issue, adding a baseUrl solves the problem.

The issue is that perhaps this should come ready in the tsconfig.json file

[spenserschwartz]

@vicasas thank you for following up

Part of the issue is that the alias paths have to be in a certain order to be read from most nested to least nested or you won't get proper results. I think I remember seeing this said somewhere but I couldn't find it stated in the docs, but this does alleviate the issue.