Module not found: Can't resolve '@/components

[zhangwei900808]

I add jsconfig.json

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

but when I run is error

error - ./src/components/context/mainContext/index.js:3:0
Module not found: Can't resolve '@/components/layout/pageHeader/logoInHeader'
  1 | import React, { useState, useEffect } from "react";
  2 | import { useRouter } from "next/router";
> 3 | import LogoInHeader from "@/components/layout/pageHeader/logoInHeader";
  4 | import Menus from "../../navMenus";
  5 | import Record from "../../layout/record";
  6 | import styles from "./index.module.scss";

[zhangwei900808]

who can help me

[polRk]

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

See more: https://stackoverflow.com/questions/43281741/how-to-use-paths-in-tsconfig-json

[nitinpatelm]

Same problem for me

[officialkevinbrian]

@nitinpatelm did you find solution?

[MMTE]

check if paths option is available both in tsconfig.json and jsconfig.json if you are using typescript or javascript.

[alimukhtar53]

I had to rename my dir name inside components from stepsInfo to steps-info

My project setup was:

project-root/
├── app/
│ ├── components/
│ │ └── stepsInfo/
│ │ └── Step1.tsx
├── tsconfig.json

Reference

[AleksaRadovanovic]

You probably renamed folder in components, in my case I renamed components/UI to components/ui.
Git might not recognize this by default. To fix it, run:

git config core.ignorecase false

Then commit and push your changes.

[arseniypom]

Just amazing, thank you so much!

[TheShagwell]

And yeah you saved the day 😎🤩

[RodrigoColin1602]

This really worked for me, i think i had problems due to folders with the same name . Hero

[parsifal486]

very very love you!!!

[yusifaliyevpro]

Thank you very much

[fyargat]

// next.config.js
/** @type {import('next').NextConfig} */

const path = require('path');

const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, './'),
    };

    return config;
  },
};

module.exports = nextConfig;

See more: https://stackoverflow.com/questions/76676456/next-js-v13-in-docker-does-not-respect-path-alias-but-works-locally

[Muskulee]

This resolves the issue: You can however use the below in ES6:
import path from 'path';

const __dirname = new URL('.', import.meta.url).pathname;

const nextConfig = {
webpack: (config) => {
config.resolve.alias = {
...config.resolve.alias,
'@': path.resolve(__dirname, './'),
};
return config;
},
};
export default nextConfig;

I hope this helps too!

[mmk0612]

This worked for me update the next.Config.mjs file this way

[YoSoyPhil]

Thank you so much! <3

[rajdevkumar2003]

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

[rajdevkumar2003]

👍🏼

…

On Mon, May 20, 2024, 12:44 Bo Kou ***@***.***> wrote: You saved me today. Thanks! — Reply to this email directly, view it on GitHub <#27666 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BARC4ZCPQ7SNYI5CCLYKELTZDGPFZAVCNFSM5BLU5672U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSNBZGMYTCMY> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[ciaranmccaughey]

I encountered the same issue during next build in my pipelines. Here's a breakdown of the problem and solution:

Problem:

1. I was setting the node environment to prod, NODE_ENV=production which prevented dev dependencies from being installed.
2. Without the dev dependencies such as TypeScript, the tsconfig file was not recognised.
3. Consequently, alias paths (e.g., @components/) defined in tsconfig were not found.

Solution:

1. Set NODE_ENV=development before the package installs NODE_ENV=development npm install
2. Alias paths defined in tsconfig (like @components/) are now correctly resolved.

[ricoardiya]

@ciaranmccaughey you just saved my day!

[ayakut16]

If you are not using typescript, try deleting tsconfig.json

[Symbolistic]

Bro I love you oh my god!
This worked

[ycenta]

Real answer that fix the problem 👍

[shubh95rai]

it worked! thanks!

[prosanjeev]

great bro

[omkute7]

Issue Breakdown : Module not found despite of right path.

Solution : I was using jsx and accidently created tsx file for a next page, A new config,tsx file got created, this path issue is due to that config.tsx file, you can delete it and your issue will be fixed.

Conslole error :-
Creating an optimized production build ...
Failed to compile.

./src/app/layout.js
Module not found: Can't resolve '@/components/ui/NavBar'

.... more of this paths down

[edtimer]

For me it was related to a file name case with absolute import. The following removed the cache and deployment worked fine.

git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push origin master //main or master based on your repo

[akakiplimo]

I encountered a similar issue while working on a Next.js project using Javascript. I accidentally created a file with .tsx instead of .jsx, this automatically triggered a next.config.ts and tsconfig.json file to be created which made the issue persist.

Solution: Delete the Typescript related files then restart the server using npm run dev your issue should be resolved