Buildable libraries cannot import or export from non-buildable libraries (eslint)

Question

I am getting above error when i import the interface from one of the library:

import { DetailsProps } from '@vite/prop-types'; //error
import styles from './header.module.less';

const initailDetails: DetailsProps = {
  name: 'Arif',
  city: 'Chennai',
  pin: 600019,
};
export function Header() {
  return (
    <div className={styles['container']}>
      <h1>Welcome to Header!</h1>
      <ul>
        {Object.values(initailDetails).map((v) => (
          <li key={v}>{v}</li>
        ))}
      </ul>
    </div>
  );
}

Nx report:

  Node : 16.13.2
   OS   : darwin arm64
   npm  : 8.1.2
   
   nx : 15.3.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.3.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.3.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.3.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : Not Found
   @nrwl/js : 15.3.3
   @nrwl/linter : 15.3.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.3.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : Not Found
   @nrwl/workspace : 15.3.3
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
     @nrwl/vite: 15.3.3

Answer 1

I removed this from my project.json of the library that was buildable (which must not be the library that the import stems from, can also be the library the the import goes to):

"build": {
  "executor": "@nx/js:tsc",
  "outputs": ["{options.outputPath}"],
  "options": {
    "outputPath": "dist/libs/shared/dto",
    "main": "libs/shared/dto/src/index.ts",
    "tsConfig": "libs/shared/dto/tsconfig.lib.json",
    "assets": ["libs/shared/dto/*.md"]
  }
},

then invalidated caches and the error was gone

Answer 2

This is because of the linter, you can disable it by setting false for enforceBuildableLibDependency in .eslintrc.json file.

or you can disable it by adding this comment before importing it:

// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
import { DetailsProps } from '@vite/prop-types';