noDynamicNamespaceImportAccess

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.9.0` - Diagnostic Category: [`lint/performance/noDynamicNamespaceImportAccess`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). ## How to configure ```json title="biome.json" { "linter": { "rules": { "performance": { "noDynamicNamespaceImportAccess": "error" } } } }

## Description
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](https://biomejs.dev/linter/rules/no-namespace-import/) rule.

## Examples

### Invalid

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

<pre class="language-text"><code class="language-text">code-block.js:2:1 <a href="https://biomejs.dev/linter/rules/no-dynamic-namespace-import-access">lint/performance/noDynamicNamespaceImportAccess</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ 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. </code></pre>

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

<pre class="language-text"><code class="language-text">code-block.js:3:1 <a href="https://biomejs.dev/linter/rules/no-dynamic-namespace-import-access">lint/performance/noDynamicNamespaceImportAccess</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ 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. </code></pre>

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]

</TabItem> </Tabs>

Valid

Related links