CODEWITHSUNDEEP
typescriptvisual-studio-codenext.jsnrwl-nx
mertinop
mertinop

Reputation: 149

Relative imports on next app created with nx using VS Code

I'm facing an issue with a Next.js project bootstraped with nx and VS Code:

When I try to auto-import a component using VS Code, it will generate an absolute import which immediately triggers the @nrwl/nx/enforce-module-boundaries eslint rule, making the current file invalid.

For example, with folder structure:

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

The generated import will be:

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

While I expect:

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

VS Code has a setting to always use relative paths for imports, but that will prevent me from importing libraries in the proper way (@scope/lib).

Is there any possible setup that can make auto imports work as expected?

Upvotes: 7

Views: 8118

Answers (2)

Nevin
Nevin

Reputation: 3298

For those who are coming here without this getting resolved. (nx monorepo usage)

Trouble shooting the 2 errors (TS error and lint error):

First the Alias error: Cannot find module '@account/components/something' or its corresponding type declarations.

  1. On your base tsconfig.base.json (not tsconfig.json under your apps as it gets overrided), add:
 "compilerOptions":{
       ...
       baseUrl:"." // Try "src" as well incase of boiler plates or if your resolved path (on the error) is missing an src.
       path: {
       "@account/*": ["app/*"],
       "@account/components/*": ["app/components/*"] 
     }
   },

The above will resolve:

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

from

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

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

  1. Add "allowCircularSelfDependency": true.
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "allowCircularSelfDependency": true, -> This may solve the lint error.
            "allow": ["@account/**"], -> // White list the lint error.
             ...
          }
  1. Whitelist the folders: Add "allow": [@foldername]
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            
            "allow": ["@account/**"], -> // White list the lint error.
             ...
           }

That should fix it.

Upvotes: 4

alexweininger
alexweininger

Reputation: 135

You can configure the paths property in the tsconfig.base.json file at the root of your project. If you add it to other tsconfig files it will not work, the correct one is the tsconfig.base.json file at the root of your project.

Going off of your example, you can add the following to the paths option.

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

Now you can change ../../../components/Loading to @my-app/components/Loading.

More detailed example (note: I've erased a bunch of the other options that should be in your tsconfig.base.json file for readability)

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

Source and more info in the official TS Handbook: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Upvotes: 6

Related Questions