eslint rule @nrwl/nx/enforce-module-boundaries fails

Question

Intro

I was very confused with that rule when I recently ported the Ng code base to Nx 12.x. I hope this post helps others who begin migrating from Ng to Nx.

The code base above is a rather small single repo which is now used in production. When using Nx it's a good practice to follow the recommendations for monorepo to be able to use the monorepo benefits in the future as the code base is growing. (E.g. here I'm avoiding the overexposing of the code in the current repo).

I put the code base above into my-org/apps/my-small-repo. By linting I was confused by the failure of the rule @nrwl/nx/enforce-module-boundaries. So I tried different possibilities of mapping the src/app of my-org/apps/my-small-repo where either compiler or linter or both just failed.

I figured out the following solutions.

Solution 1

Just put

  "compilerOptions": {
    "baseUrl": "src"
  },

into the root of apps/my-small-repo/tsconfig.json and replace all of your imports inside of apps/my-small-repo with imports beginning with app.

Example for a DashboardComponent:

import { DashboardComponent } from 'app/components/dashboard/dashboard.component';

Probably a better solution

This solution is tested on nx 13.x, but it probably works on previous versions of nx also.

Put

"app/*": ["apps/my-org/src/app/*"]

to the paths in compilerOptions of your tsconfig.base.json in the repo root. Then put "allowCircularSelfDependency": true, to the rule @nrwl/nx/enforce-module-boundaries in the repo root.

We decided for "allowCircularSelfDependency": true, to avoid working with ugly relative paths like like e.g. this one ../../../../../ in the app. And we also want to have library namespaces in tsconfig.base.json only.

Documentation of the rule

https://github.com/nrwl/nx/blob/master/packages/eslint-plugin-nx/src/rules/enforce-module-boundaries.ts

Tarnish

Lint gave me an error when I used an alias. but fixed after i added this "allowCircularSelfDependency": true, Thanks a lot! – Elusive

in my case adding "allowCircularSelfDependency" didn't work. Instead I added the names of the two libs which causes the trouble in the "allow" option. Changing "error" to "warn" could also be possible. – Lockman

The documentation link is broken, you can use this link instead. – Magnify

Answer 1

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.
             ...
          }

2. Whitelist the folders: Add "allow": [@foldername]

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

That should fix it.

Glycoprotein

Answer 2

To get this working:

1. On your base tsconfig.base.json or your local tsconfig.json. I suggest to do it on the tsconfig.base.json

Considering your path apps/my-org/src/app/*

    "compilerOptions":{
       ...
       baseUrl:"src"
       path: {
       "@app/*": ["app/*"] // << Here is the change
       }
   },

2. Import in your code files from this apps/my-org/src/app/* to this @app/*

Leucopoiesis

path isnt a valid compileroption, did you mean paths? typescriptlang.org/tsconfig#paths – Proclaim

that's right it should be paths – Acculturate