Using Visual Studio Code, the next app created with nx now supports relative imports

Question

Using Visual Studio Code, the next app created with nx now supports relative imports

I am encountering a problem with a Next.js project set up using nx and VS Code:

When trying to automatically import a component in VS Code, it generates an absolute import which then triggers the

@nrwl/nx/enforce-module-boundaries

eslint rule, rendering the current file as invalid.

For example, consider the following folder structure:

apps/my-app/
  pages/
    entity/
      new/
        index.tsx
  components/
    Loading.tsx

The generated import looks like this:

// in my-app/pages/entity/new/index.tsx
import Loading from 'apps/my-app/components/Loading'

However, I expect it to be:

import Loading from '../../../components/Loading'

Although VS Code has a setting to always use relative paths for imports, it may prevent importing libraries in the appropriate manner (@scope/lib).

Is there any configuration that can ensure auto imports function as expected?

typescript visual-studio-code next.js nrwl-nx

Answer 1

Answer №1

To set up the paths property in your project, navigate to the tsconfig.base.json file located at the root directory. It's important to only include this configuration in the main tsconfig.base.json file, as it won't work properly if added to other tsconfig files.

For example, you can update the paths option with the following:

"@my-app/*": ["apps/my-app/*"]

Once configured, you can easily replace instances of ../../../components/Loading with @my-app/components/Loading.

Here is a simplified version of the setup within the tsconfig.base.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@my-app/*": [
                "apps/my-app/*"
            ]
        }
}

For more information and additional details, refer to the official TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Answer 2

To set up the paths property in your project, navigate to the tsconfig.base.json file located at the root directory. It's important to only include this configuration in the main tsconfig.base.json file, as it won't work properly if added to other tsconfig files.

For example, you can update the paths option with the following:

"@my-app/*": ["apps/my-app/*"]

Once configured, you can easily replace instances of ../../../components/Loading with @my-app/components/Loading.

Here is a simplified version of the setup within the tsconfig.base.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@my-app/*": [
                "apps/my-app/*"
            ]
        }
}

For more information and additional details, refer to the official TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Answer 3

Answer №2

For those encountering unresolved issues related to nx monorepo usage:

Troubleshooting two common errors (TS error and lint error):

Firstly, addressing the Alias error:

Unable to locate module '@account/components/something' or its type declarations.

In your base tsconfig.base.json file (not the tsconfig.json under your apps, as it gets overridden), include:

"compilerOptions":{
       ...
       baseUrl:"." // Consider using "src" if relevant for boiler plates or missing path resolution on the error message.
       paths: {
       "@account/*": ["app/*"],
       "@account/components/*": ["app/components/*"] 
     }
   },

The above configuration will resolve:

import { authMiddleware } from '@account/components/something';

to

import { authMiddleware } from '../../../components/something';

Regarding the lint error:

Projects should use relative imports to import from other files within the same project - eslint rule @nrwl/nx/enforce-module-boundaries fails`

Set "allowCircularSelfDependency" to true.

"@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "allowCircularSelfDependency": true, -> This might resolve the lint error.
            "allow": ["@account/**"], -> // Whitelist the lint error.
             ...
          }

Specify allowed folders: Include "allow": [@foldername]

"@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            
            "allow": ["@account/**"], -> // Whitelist the lint error.
             ...
           }

These steps should help resolve the issues.

Answer 4

For those encountering unresolved issues related to nx monorepo usage:

Troubleshooting two common errors (TS error and lint error):

Firstly, addressing the Alias error:

Unable to locate module '@account/components/something' or its type declarations.

In your base tsconfig.base.json file (not the tsconfig.json under your apps, as it gets overridden), include:

"compilerOptions":{
       ...
       baseUrl:"." // Consider using "src" if relevant for boiler plates or missing path resolution on the error message.
       paths: {
       "@account/*": ["app/*"],
       "@account/components/*": ["app/components/*"] 
     }
   },

The above configuration will resolve:

import { authMiddleware } from '@account/components/something';

to

import { authMiddleware } from '../../../components/something';

Regarding the lint error:

Projects should use relative imports to import from other files within the same project - eslint rule @nrwl/nx/enforce-module-boundaries fails`

Set "allowCircularSelfDependency" to true.

"@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "allowCircularSelfDependency": true, -> This might resolve the lint error.
            "allow": ["@account/**"], -> // Whitelist the lint error.
             ...
          }

Specify allowed folders: Include "allow": [@foldername]

"@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            
            "allow": ["@account/**"], -> // Whitelist the lint error.
             ...
           }

These steps should help resolve the issues.

Using Visual Studio Code, the next app created with nx now supports relative imports

Answer №1

Answer №2

Similar questions

What is the best way to store a small number of files in the state

Is there a way to enforce a mandatory lambda argument?

Custom React hook that returns an array of custom components

Dragging element position updated

Can a client receive a response from server actions in Next.js 13?

Managing TypeScript objects

Integrate service once the constructor has completed execution

The 'HTMLDivElement' type does not include the property 'prepend' in Typescript

TS2531: Nullability detected in object when using .match() method

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

Issue with executing a server-side function in a Next.js application

Ways to retrieve specific Observable elements?

The NgModel function within *ngFor is executing more times than necessary during initialization

When working with esbuild in AWS Amplify, an error occurs with the invalid build flag -rw-r--r

data retrieval not refreshing sorting post construction

What is the reason for VS Code recognizing an import as valid while WebPack does not approve it?

The combination of TypeScript output is not working as expected

Issue with Angular 6: Struggling to Implement DatePipe

Some devices are experiencing issues with their camera not turning on during Next.js and Socket.IO video chats

Angular allows for creating a single build that caters to the unique global style needs of every