How to fix "Module not found" error when using path aliases in Next.js?

[minx-nie]

Summary

I'm using Next.js 14 and configured path aliases in tsconfig.json:

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

But I keep getting "Module not found: Can't resolve '@/components/Button'" error.

What am I missing?

Additional information

No response

Example

No response

[ThanhNguyxn]

Hi!

The issue is that Next.js needs the same alias configuration in next.config.js. Here's the fix:

1. Update next.config.js:

const path = require('path');

module.exports = {
webpack: (config) => {
config.resolve.alias['@'] = path.resolve(__dirname, 'src');
return config;
},
};

2. Or simpler - just restart the dev server:

Sometimes the alias works after restarting:

• Stop the server (Ctrl+C)
• Run npm run dev again

3. Make sure your folder structure matches:

your-project/
├── src/
│ └── components/
│ └── Button.tsx
├── tsconfig.json
└── next.config.js

Hope this helps! 🚀

[icyJoseph]

Hiyo, sorry but this is wrong.

All you need is:

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

In your tsconfig.js - then you can have:

import { Div } from "@/components/div";

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

In this tree:

.
├── next-env.d.ts
├── next.config.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   ├── app
│   └── components
└── tsconfig.json

Modifying the Webpack config is not necessary.

This Module not found issue can also happen if you have wrong casing (uppercase/lowercase) when importing the file. There are other edge cases but you haven't mentioned any of them.