Skip to main content
Version: 6.0.0

no-unknown

Prevent importing unknown elements from known elements.

Rule Details​

This rule validates dependencies to local files. If the imported file is not recognized as any of the elements defined in settings, the dependency will be reported as an error when importing from a known element.

info

This rule helps ensure that all files used in your project are properly categorized as elements, preventing unstructured dependencies.

tip

The restriction set by this rule can also be achieved with the boundaries/dependencies rule, which allows you to specify rules based on the isUnknown property of the elements selector, but it is provided as a shortcut for this common use case. You can choose to use either this specific rule or the boundaries/dependencies for more granularity and flexibility based on your preference and needs.

Read replacement with boundaries/dependencies section below for more details and examples.

Options​

"boundaries/no-unknown": [<enabled>]

Configuration properties:

  • enabled: Enables the rule. 0 = off, 1 = warning, 2 = error

Configuration Example​

{
  rules: {
    "boundaries/no-unknown": [2]
  }
}

Settings​

The following examples use this project structure and settings configuration.

Project structure:

src/
├── components/
│   └── atoms/
│       ├── atom-a/
│       │   ├── index.js
│       │   └── AtomA.js
│       └── atom-b/
│           ├── index.js
│           └── AtomB.js
├── helpers/
│   ├── data/
│   │   ├── sort.js
│   │   └── parse.js
│   └── permissions/
│       └── roles.js
├── foo.js
└── index.js

Settings configuration:

{
  settings: {
    "boundaries/elements": [
      {
        type: "helper",
        pattern: "helpers/*/*.js",
        mode: "file",
        capture: ["family", "elementName"]
      },
      {
        type: "component",
        pattern: "components/*/*",
        mode: "folder",
        capture: ["family", "elementName"]
      }
    ]
  }
}

Examples​

Incorrect​

Helpers importing unknown foo.js file:

// src/helpers/data/parse.js
import foo from '../../foo'

Components importing unknown index.js file:

// src/components/atoms/atom-a/AtomA.js
import index from '../../../index'

Correct​

Components importing helpers:

// src/components/atoms/atom-a/AtomA.js
import { someParser } from '../../../helpers/data/parse'

Unknown files importing other unknown files:

// src/index.js
import foo from './foo'

Replacement with boundaries/dependencies​

You can achieve the same result by using the boundaries/dependencies rule and specifying rules based on the isUnknown property of the elements selector.

warning

You need to set the checkUnknownLocals option to true in your boundaries/dependencies configuration to make sure that dependencies from unknown local files are also checked, as by default boundaries/dependencies only checks dependencies between local known elements.

{
  rules: {
    "boundaries/dependencies": [
      2,
      {
        checkUnknownLocals: true,
        default: "allow",
        rules: [
          {
            from: { isUnknown: false },
            disallow: {
              to: { isUnknown: true }
            }
          },
          // Or use more granular rules to allow some specific dependencies
          // to unknown files, for example:
          {
            from: { type: "helper" },
            allow: {
              to: { isUnknown: true }
            }
          }
        ]
      }
    ]
  }
}

Further Reading​

Read next sections to learn more about related topics: