Next.js Discord

Discord Forum

Need help with setting up Module Path Aliases

Answered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
Okay, hitting a wall here, and I can't figure out what's wrong. I'm trying to set up module path aliases, but something is of. I followed what's described in the docs here: https://nextjs.org/docs/app/getting-started/installation#set-up-absolute-imports-and-module-path-aliases

This is my ⁨jsconfig.json⁩:
⁨
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
⁩

But when I import a component like this for example:
⁨import { Timeline } from "@/components/Timeline";⁩

I get a build error:
⁨Module not found: Can't resolve '@/components/Timeline'⁩

The relative path would be:
⁨src/components/Timeline.js⁩

The odd thing is, that VS Code can resolve the path. It suggests me imports like this, and I can even Ctrl-click on the ⁨Timeline⁩ import, and it jumps to the right file.
Answered by Poodle
There it is. When you have a tsconfig.json it ignores jsconfig.json entirely. Lets try adding baseUrl and paths to your tsconfig compilerOptions instead:
⁨
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}
⁩

Delete jsconfig.json after that and restart the server.
View full answer

7 Replies

@Poodle have you tried killing the dev server and restarting? Next.js caches jsconfig on startup so changes dont always pick up. If that doesnt fix it, try this setup instead: ⁨⁨ { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } } ⁩⁩ also double check you dont have a tsconfig.json thats overriding it.
Brown bearOP
Yep, always restarted after any changes to the jsconfig. Even tried to delete the .next folder once. Sadly, your config snippet didn't work either.

My tsconfig looks like this:
⁨
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "incremental": true,
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts",
    "**/*.mts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
⁩
Answer
@Poodle There it is. When you have a tsconfig.json it ignores jsconfig.json entirely. Lets try adding baseUrl and paths to your tsconfig compilerOptions instead: ⁨ "baseUrl": ".", "paths": { "@/*": ["./src/*"] } ⁩ Delete jsconfig.json after that and restart the server.
Brown bearOP
I really wished this would have been the solution, but nope. Still no luck:

⁨
## Error Type
Build Error

## Error Message
Module not found: Can't resolve '@/components/Timeline'

## Build Output
./src/app/about/page.js:3:1
Module not found: Can't resolve '@/components/Timeline'
  1 | import Link from "next/link";
  2 |
> 3 | import { Timeline } from "@/components/Timeline";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4 |
  5 | export const metadata = {
  6 |   title: {

https://nextjs.org/docs/messages/module-not-found

Next.js version: 16.1.6 (Turbopack)
⁩

while in the ⁨tsconfig.json⁩ I have:
⁨
  "exclude": [
    "node_modules"
  ],
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}
⁩

Btw, when I do it as relative import like ⁨import { Timeline } from "../../components/Timeline";⁩ it works perfectly fine