CODEWITHSUNDEEP
javascripteslint
Leo Jiang
Leo Jiang

Reputation: 26145

Eslint no-restricted-imports only restrict importing from a package root?

E.g. I want to restrict importing react-use, but allow react-use/lib/usePrevious. I tried:

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

And

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

However, in both case, I get an error for:

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

I only want an error for:

import something from 'react-use';

Upvotes: 2

Views: 4586

Answers (4)

dogakorkmaz
dogakorkmaz

Reputation: 129

For anyone who couldn't find an answer, you can check out eslint documents.

Specifying "default" string inside the importNames array will restrict the default export from being imported.

Upvotes: 0

zhuhang.jasper
zhuhang.jasper

Reputation: 4475

In case you looking to create a rule for optimizing bundle size when using @mui/icons-material

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

Upvotes: 0

Khushbu Patel
Khushbu Patel

Reputation: 329

I wanted to do the same thing with lodash.

For Treeshaking, I wanted to restrict

import {get} from 'lodash';

but allow

import get from 'lodash/get';

eslint config for this,

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

You can try the same for your package.

Upvotes: 2

Adam
Adam

Reputation: 3965

This is a limitation with the ignore library that ESLint uses to check each pattern. It was built to replace existing file ignore methods with something more compact and barebones.

Specifically, the problem seems to be that this ignore system assumes your file structure is strictly directory-like, where restricting react-use and ignoring !react-use/* implies that react-use is a folder. However, with a module import structure, react-use can refer to a file (via its index.js) and simultaneously contain subfolders like react-use/lib making it usable as both a file and a folder.

So it won't be possible to ignore the base of the module while restricting a subpath.

Upvotes: 1

Related Questions