Issue with import alias not functioning within route grouping in Nextjs

Exploring the use of route groups and nested layout files led to encountering a "module-not-found" error with every import that used "@".

Here is my jsconfig.json setup:

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

The specific error message I am facing is:

⨯ ./src/app/(main)/dashboard/page.js:9:1
Module not found: Can't resolve '@lib/schemas/subscriptionSchema'
   7 | import NotAccepted from "./notAccepted";
   8 |
>  9 | import Subscription from "@lib/schemas/subscriptionSchema";
     | ^
  10 | import Users from "@/lib/schemas/userSchema";
  11 | import Events from "@/lib/schemas/eventSchema";
  12 | import Stripe from "stripe";

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

Showing my folder structure:

https://i.sstatic.net/TpSAoByJ.png

I would greatly appreciate any assistance. Thank you

Using Next.js version 14.2.3

Attempted replacing @/ with ../../ (as needed) which worked but is not an ideal solution.

javascriptnext.jsroutes

Answer №1

My application encountered a similar issue after updating the dependencies, even though it was functioning properly before.

To resolve it, I simply removed the '@' symbol wherever it appeared, and the issue was resolved.

For instance, in cases where I had imported components like this 

import AComponent from "@/components/a-component"
, I replaced it with 
import AComponent from "/components/a-component"
without the @ symbol, and it worked.

It's worth noting that my jsconfig.json file differs slightly from yours, containing only the following instructions:

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

}

Thus far, this has been the only solution that has successfully resolved the issue for me. Hopefully, it will prove helpful to you as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vuejs to dynamically render a select dropdown based on the initial selection made in the first dropdown menu

I am facing an issue with two drop-down menus. The second menu's choices need to be filtered and displayed based on the selection made in the first drop-down. The RoomID value from the first drop-down is used to filter an array of objects for the seco ...

javascriptvue.jsvuejs2

Update the URL path with the selected tab item displayed

Is there a way to show the selected tab item in the URL path? I came across this example using Material UI: import * as React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typ ...

javascriptreactjsmaterial-ui

Rendering a Vue select list before receiving data from a Meteor callback

I am currently facing an issue with populating my events array from a meteor call so that it appears in a select list. The 'get.upcoming' Meteor function returns an array of JSON objects, but it seems like the select list is being rendered before ...

javascriptmeteorcallbackvue.jsvuejs2

I am facing an issue with the Tailwind Flowbite Datepicker dropdown UI when running "npm run prod" for minification. The class is not being added during minification on the npm

I have successfully integrated a Laravel project with Tailwind CSS. I have also implemented the Flowbite Datepicker using a CDN to include the necessary JavaScript. Initially, everything was working fine and the date-picker was displaying correctly. Howev ...

javascriptnpmdatepickertailwind-cssflowbite

The integration between Javascript, PHP, and SQL Server does not display the retrieved data

I am a beginner in PHP and have limited knowledge of Javascript. I am attempting to create a chronometer where the time limit is retrieved from a SQL SERVER database. However, when I assign the value obtained in PHP to a Javascript variable, it returns -1. ...

javascriptphpjsonsql-server

php receiving no value in ajax response

In an attempt to create search suggestions similar to Google, I have set up a table with tags and a single column called 'tag' to store the tags. However, I am encountering an issue where if I input nothing or a tag that is already in the databas ...

phpjavascriptxmlajax

What is the reason for the clearInterval consistently functioning after the completion of the function?

Just starting out in web programming and currently delving into javascript and jquery ajax.. This snippet represents my javascript code. The refresh variable controls an interval for updating the chat by fetching chats from the database and displaying the ...

javascriptajax

Enhancing TypeScript - Managing Variables within Namespace/Scope

Why is the console.log inside the function correctly logging the object, but after the function returns it logs undefined, failing to update the variable? In addition, when using this within testNameSpace, it returns window. Why is that? namespace testNa ...

javascriptjsontypescript

Is the auto-import feature in the new VSCODE 1.18 compatible with nodelibs installed via npm?

Testing out the latest auto-import feature using a JS file in a basic project. After npm installing mongoose and saving an empty JS file for editing, I anticipate that typing const Schema = mongoose. will trigger an intellisense menu with mongoose nodelib ...

javascriptnode.jsvisual-studio-codeauto-import

Strategies for Handling Errors within Observable Subscriptions in Angular

While working with code from themes written in the latest Angular versions and doing research online, I've noticed that many developers neglect error handling when it comes to subscription. My question is: When is it necessary to handle errors in an ...

javascriptangulartypescripterror-handling

Issue of memory leakage while working with promises

My node.js cluster is set up with a primary that manages worker cycles (in the while loop) and listens to worker messages for progression in the cycle. (In this code snippet, I simplified the structure to highlight the issue) Server.js var cluster = requi ...

javascriptnode.jspromiseeventemitter

Having difficulties in storing the checkbox selections

Whenever I switch components and return back, the checkboxes do not persist. I want to ensure that the checked checkboxes stay checked. For more information and code samples, you can visit this CodeSandbox link: CodeSandbox Link. courses.js import React ...

javascriptreactjscheckbox

The bxSlider reloadSlider() function is not defined once the page has finished loading

I am currently working on developing an interactive upload and refresh gallery using AJAX and jQuery. The application allows for the upload of multiple images through drag & drop. After uploading, I need to visualize how the new gallery will appear with t ...

javascriptphpjqueryajaxbxslider

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

javascriptcss

Typescript is unable to comprehend that the initial item in an array of strings is considered to be a string

Here are the functions I am working with: const transitionGroup = ( propertyName: string, durationMultiple = 1, timingFunction = 'linear', delayMultiple = 0, ): string => { // ...more logic here return [propertyName, duration, tim ...

javascripttypescript

Obtain the name of the checkbox that has been selected

I'm new to JavaScript and HTML, so my question might seem silly to you, but I'm stuck on it. I'm trying to get the name of the selected checkbox. Here's the code I've been working with: <br> <% for(var i = 0; i < ...

javascripthtmljsp

Walls that collide in three.js

I am currently developing a game using three.js and despite being new to this field, I have extensively studied collision documentation. To handle collisions between my boat (inside a cube) and the islands (contained in cubes), I implemented raycasting. He ...

javascriptthree.jscollision-detectionraycasting

Activate the Giphy search feature in the Slack Nestor bot's response

How can the nestor bot be configured to use a giphy search when replying in a Slack channel where the giphy plugin is active? Can something like msg.reply('/giphy ' + text, done); be used for this purpose? ...

javascriptbotsslackgiphy

How can I create a vertically scrollable table body using material-ui?

Is it possible to create a scrollable table body if the height property does not apply to the tbody element? const styles = { tableBody: { height: 300, overflow: "auto" } }; <Paper className={classes.root}> <Table> < ...

javascriptreactjsmaterial-ui

I'm sorry, the system can't locate the authentication property because it is undefined

I'm currently facing an issue while incorporating firebase-ui into a VueJS project. My API credentials are stored in a file named config.js export default { apiKey: "*****", authDomain: "*****.firebaseapp.com", databaseURL: " ...

javascriptfirebasevue.jsfirebase-authenticationfirebaseui