noDynamicNamespaceImportAccess

Diagnostic Category: lint/nursery/noDynamicNamespaceImportAccess

JavaScript (and super languages)

Since: v1.9.0

Disallow accessing namespace imports dynamically.

Accessing namespace imports dynamically can prevent efficient tree shaking and increase bundle size. This happens because the bundler cannot determine which parts of the namespace are used at compile time, so it must include the entire namespace in the bundle.

Instead, consider using named imports or if that is not possible access the namespaced import properties statically.

If you want to completely disallow namespace imports, consider using the noNamespaceImport rule.

Examples

Invalid

import * as foo from "foo"
foo["bar"]

code-block.js:2:1 lint/nursery/noDynamicNamespaceImportAccess ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Avoid accessing namespace imports dynamically, it can prevent efficient tree shaking and increase bundle size.
  
    1 │ import * as foo from “foo”
  > 2 │ foo[“bar”]
      │ ^^^^^^^^^^
    3 │ 
  
  ℹ Prefer static property access or use named imports instead.

import * as foo from "foo"
const key = "bar"
foo[key]

code-block.js:3:1 lint/nursery/noDynamicNamespaceImportAccess ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Avoid accessing namespace imports dynamically, it can prevent efficient tree shaking and increase bundle size.
  
    1 │ import * as foo from “foo”
    2 │ const key = “bar”
  > 3 │ foo[key]
      │ ^^^^^^^^
    4 │ 
  
  ℹ Prefer static property access or use named imports instead.

Valid

import * as foo from "foo"
foo.bar

import { bar } from "foo"
bar

import messages from "i18n"
const knownMessagesMap = {
 hello: messages.hello,
 goodbye: messages.goodbye
}

const dynamicKey = "hello"
knownMessagesMap[dynamicKey]

noDynamicNamespaceImportAccess

Examples

Invalid

Valid

Related links