Does Eslint's no-restricted-imports rule only limit imports from the package's root directory?

Question

Does Eslint's no-restricted-imports rule only limit imports from the package's root directory?

For example, I'm looking to limit the usage of importing react-use, while still permitting react-use/lib/usePrevious. I attempted this:

  rules: {
    'no-restricted-imports': [2, { patterns: [
      'react-use',
    ] }],
  },

As well as:

  rules: {
    'no-restricted-imports': [2, { patterns: [
      'react-use',
      '!react-use/*',
    ] }],
  },

But in both scenarios, I encounter an error with:

import usePrevious from 'react-use/lib/usePrevious';

I specifically want the error to trigger only for:

import something from 'react-use';

javascript eslint

Answer 1

Answer №1

I was looking to achieve a similar result using lodash.

Regarding Treeshaking, I aimed to limit

import {get} from 'lodash';

but allow

import get from 'lodash/get';

This is my eslint configuration for achieving this:

'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'lodash',
            message:
              "Please use `import [package] from 'lodash/[package]'` instead."
          }
        ],
        patterns: ['!lodash/*']
      }
    ]

You could implement a similar approach for your own package as well.

Answer 2

I was looking to achieve a similar result using lodash.

Regarding Treeshaking, I aimed to limit

import {get} from 'lodash';

but allow

import get from 'lodash/get';

This is my eslint configuration for achieving this:

'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'lodash',
            message:
              "Please use `import [package] from 'lodash/[package]'` instead."
          }
        ],
        patterns: ['!lodash/*']
      }
    ]

You could implement a similar approach for your own package as well.

Answer 3

Answer №2

The issue lies within the ignore library utilized by ESLint for pattern checking. This library was designed to offer a more streamlined and basic alternative to existing file ignore methods.

More specifically, the challenge arises from the assumption made by this ignore system regarding the structure of your files. It operates under the belief that when you limit react-use while simultaneously ignoring !react-use/*, it interprets react-use as a directory. However, in a module import setup, react-use can pertain to a file (such as its index.js) while also housing subdirectories like react-use/lib, thus functioning as both a file and a directory.

This creates a scenario where excluding the module's base while limiting a subdirectory becomes unfeasible.

Answer 4

The issue lies within the ignore library utilized by ESLint for pattern checking. This library was designed to offer a more streamlined and basic alternative to existing file ignore methods.

More specifically, the challenge arises from the assumption made by this ignore system regarding the structure of your files. It operates under the belief that when you limit react-use while simultaneously ignoring !react-use/*, it interprets react-use as a directory. However, in a module import setup, react-use can pertain to a file (such as its index.js) while also housing subdirectories like react-use/lib, thus functioning as both a file and a directory.

This creates a scenario where excluding the module's base while limiting a subdirectory becomes unfeasible.

Answer 5

Answer №3

If you are interested in creating a rule to optimize bundle size while using the @mui/icons-material package,

    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "@mui/icons-material",
            message: "Please use `import SomeIconName from '@mui/icons-material/SomeIconName'` instead, to reduce compilation bundle size.",
          },
        ],
        patterns: ["@mui/*/*/*", "!@mui/icons-material/*"],
      },
    ],

Answer 6

If you are interested in creating a rule to optimize bundle size while using the @mui/icons-material package,

    "no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "@mui/icons-material",
            message: "Please use `import SomeIconName from '@mui/icons-material/SomeIconName'` instead, to reduce compilation bundle size.",
          },
        ],
        patterns: ["@mui/*/*/*", "!@mui/icons-material/*"],
      },
    ],

Answer 7

Answer №4

If you're struggling to find a solution, feel free to refer to the ESLint documentation.

Including the "default" string in the importNames array will prevent importing the default export.

Answer 8

If you're struggling to find a solution, feel free to refer to the ESLint documentation.

Including the "default" string in the importNames array will prevent importing the default export.

Does Eslint's no-restricted-imports rule only limit imports from the package's root directory?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Include an item in a Vuetify model's array of objects

How can we ensure that an enum is accessible throughout the entire meanjs stack?

Is it possible to pass a random variable into an included template in Jade?

Changing tabs will redirect the url

Displaying a JavaScript array containing multiple arrays

React native and redux: Updating state with setState is not possible during an ongoing state transition

IIS Alert: Missing Images, CSS, and Scripts!

The python-pyinstrument is in need of a javascript dependency that seems to

AngularJS: Double the power of Ajax. Can you assist me?

Control the playback of individual HTML5 audio elements using jQuery for seamless user experience

Using Regular Expressions to access a deeply nested object

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

Utilize CSS with dynamically created elements

`Javascript often returns NaN for basic calculations`

Is your Angular 2 routing failing to work properly after a page refresh or reload when using gulp?

Unable to retrieve button value with material-ui package

Decoding the Language of HTTP Status Codes

React - Can you explain the purpose of the callback function in the forceUpdate method?

What is the simplest method for preserving the Redux state?

A guide on utilizing multer-sftp for downloading files