Importing a dependency's dependency emits eslint(node/no-extraneous-import) error

Viewed 248

When I import my dependency's dependency eslint will emit node/no-extraneous-import error since that package is not in my package.json. What is the proper way to handle the situation?

As an example, using Chakra-UI only requires @chakra-ui/react package which has required packages as dependencies. If I want to import the default theme I can do it as import defaultTheme from '@chakra-ui/theme'; but that will emit the error. I don't like to add @chakra-ui/theme to my package.json to avoid future version mismatches.

1 Answers

I solved this issue by adding the dependency's dependency as an allowed module in eslint configuration as shown below. After that the import defaultTheme from '@chakra-ui/theme'; will no longer emit an error.

// .eslintrc.json
{
  "settings": {
    "node": {
      // Modules are installed with @chakra-ui/react
      "allowModules": ["@chakra-ui/theme", "@chakra-ui/theme-tools"]
    }
  }
}
Related