Having trouble locating the module - Nuxt 3, TypeScript

Encountering an issue while attempting to import a .ts file in 'nuxt.config.ts' using the paths '@/' and '~/'. The error message reads: Cannot find module '~/path', Require stack: - nuxt.config.ts at Module._resolveFilename....

Here is a snippet of code from the nuxt.config.ts file

// this code does not work
import headConfig from '~/config/head/headConfig';
// import headConfig from '@/config/head/headConfig';

// this code works
// import headConfig from './config/head/headConfig';


export default defineNuxtConfig({
  devtools: { enabled: false },

  app: {
    head: headConfig,
  },
});

Check out the demo on StackBlitz

Nuxt Version: 3.8.2 | Node Version: 18.18.0 | NPM Version: 9.4.2

Answer №1

Regrettably, at this time the requested feature is not available. Therefore, when working within the nuxt.config.ts file, it is necessary to utilize either relative or absolute paths for import.

Answer №2

When working with Nuxt.js, the @ alias is automatically configured to point to the root directory (also known as project root). If you find yourself without a src directory and your configuration or files are located directly in the root directory or some other custom directory

You can't rely on the @ alias for specific directories like you would in Vue CLI when using src. Instead, consider using relative paths or explicitly stating the path to import your files based on your project's directory structure.

I trust this information will be helpful to you.

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

Refresh the context whenever the state object changes

Within my application, I am utilizing a PageContext to maintain the state of various User objects stored as an array. Each User object includes a ScheduledPost object that undergoes changes when a user adds a new post. My challenge lies in figuring out how ...

Utilizing Typescript and Jest to prevent type errors in mocked functions

When looking to simulate external modules with Jest, the jest.mock() method can be utilized to automatically mock functions within a module. After this, we have the ability to modify and analyze the mocked functions on our simulated module as needed. As ...

What is the best way to define ngOptionValue for my ng-option selection?

After updating my select/option code to include a search feature, it caused an issue with my function create. Here is the HTML code: <div class="input-group"> <label htmlFor="categoria" class="sr-only"> ...

Encountering an error in Chrome where the property 'command' is undefined

Currently utilizing typescript and encountered an error in the chrome console: Error found in event handler for (unknown): TypeError: Unable to access property 'command' as it is undefined at chrome-extension://somethingsomethingsometh ...

TypeScript: By providing a variable CLASS as an argument to a function, automatically determine the return type to be an object of the specified class without any additional information

I am looking to create a function that accepts actual class objects themselves as arguments (within an object containing multiple arguments), with the return type of the function being inferred to be an instance of the class provided as the argument. In t ...

Error in Angular8: Attempting to loop through an undefined property

I have searched tirelessly for a solution, but none of them seem to work. Every time I click on the edit button, it redirects me to edit-event page and shows me this error: ERROR TypeError: Cannot read property 'categories' of undefined n ...

Encountering an Invalid JSON error on the Developer console

I'm in the process of building a React application and aiming to establish a connection with my Back4App database. Within the Back4App dashboard, there exists a Person class containing data that needs to be retrieved. It appears that the call is being ...

Step-by-step guide on filtering an array of objects using Vuejs and TypeScript

For this particular project, I am utilizing Vuejs Typescript with a data structure that looks like this: ["order": { "id":1, "created_at":"2019-12-06T10:22:17Z", "status":"open", ...

Could someone provide an explanation for the meaning of the phrase "class User extends Model<UserAttribute UserCreationAttribute>"?

View Image of the Issue I am puzzled by why we are utilizing both UserCreationAttribute and UserAttribute in that specific arrow, especially when UserCreationAttribute is created by omitting one field from UserAttribute. Can someone please clarify this fo ...

New to TypeScript: Encounter a compilation error while launching Apollo Server and attempting to resolve a promise

Seeking assistance with starting an Apollo server in a TypeScript project utilizing Express. The code snippet for my app.ts is displayed below. Upon execution, I encounter the following error: Argument of type '(value: unknown) => void' is not ...

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

Currently, I am working on coding a ReactJS class using Typescript and Material-ui in a .tsx file. In one of the custom components that I have created, I need to establish a reference to another component used within this custom component. export class My ...

Creating a generic that generates an object with a string and type

Is there a way to ensure that MinObj functions correctly in creating objects with the structure { 'name': string }? type MinObj<Key extends string, Type> = { [a: Key]: Type } type x = MinObj<'name', string> Link to Playgr ...

The Type-Fest library in TypeScript is malfunctioning when used with a constant

Currently, I am utilizing a PartialDeep feature from the library type-fest. Here is an example of how I am using it with a const: const test = { value: 1, secondLevel: { value: 1, thirdLvl: { value: 1, fifthLvl: { value: 1 ...

Using styled-components in React

I came across this interesting code snippet in the styled-components documentation. Here it is: const Button = styled.button<{ $primary?: boolean; }>` background: ${props => props.$primary ? "#BF4F74" : "white"}; color: ${p ...

How can one use TypeScript to return a subclass instance within a static function of a base class?

Below is the code snippet: class BaseElement { public static create<T extends typeof BaseElement>(this: T ): InstanceType<T> { this.createHelper(); const r = new this(); return r; } public static createHelpe ...

Angular - Keeping component data in sync with service updates

Within my Angular application, I have several components utilized in an NgFor loop which all rely on a common service. My goal is to create a system where if one component alters a value within the shared service, that updated value will automatically pro ...

The getter function is called before the v-if directive in the child slot component

I have developed a Vue component that needs to perform certain logic and based on that logic, I want to render the content inside the slot. <logic-component> <div>{{ data }}</div> </logic-component> The data is retrieved using a ...

Pagination Bug: Index Incorrectly Grabbed Upon Navigating to Next Pages

I encountered an issue with my paginated article list (105 articles with 10 per page). Everything works fine on the first page, but when I click on an article from page 2 onwards, it takes me to the index of the very first article in the array. <div cla ...

Visual Studio fails to acknowledge changes made to TypeScript files and incorrectly assumes that the project is up to date

I am currently utilizing TypeScript in a project based on ASP.NET Core 3 (preview 5), using the latest version of VS 2019 16.1.1 (tsc: 3.4). Whenever I perform a "Rebuild All" or make changes to any C# files or even modify the tsconfig.json file, all my T ...

What is the best way to extract a property if it may be undefined?

Can anyone help with this TypeScript error I'm encountering during build time? Any suggestions would be appreciated. Error Message: TypeError: Cannot destructure property 'site' of '(intermediate value)' as it is undefined. export ...