no-namespace

Keywords: React, namespace import, named imports, tree shaking, bundle size, ESLint rule, LLM-optimized

Prevent namespace imports in React applications. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Warning (optimization)
Auto-Fix	❌ No (requires import conversion)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	Bundle optimization, tree shaking

Rule Details

Namespace imports (import * as X from 'module') prevent effective tree shaking and increase bundle size. Use named imports instead for better optimization.

Why This Matters

Issue	Impact	Solution
🔄 No tree shaking	Larger bundle size	Use named imports
🐛 Unclear dependencies	Hard to see what's used	Explicit imports
🔍 Analysis difficulty	Static analysis less effective	Named imports enable tooling

Examples

❌ Incorrect

// BAD: Namespace import imports everything
import * as React from 'react';
import * as utils from './utils';
import * as lodash from 'lodash';

function MyComponent() {
  const value = lodash.get(data, 'nested.value');
  return <React.Fragment>{value}</React.Fragment>;
}

✅ Correct

// GOOD: Named imports enable tree shaking
import React, { Fragment, useState, useEffect } from 'react';
import { formatDate, parseQuery } from './utils';
import get from 'lodash/get';

function MyComponent() {
  const value = get(data, 'nested.value');
  return <Fragment>{value}</Fragment>;
}

// Even better: Use JSX shorthand
function MyComponent() {
  const value = get(data, 'nested.value');
  return <>{value}</>;
}

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/no-namespace': 'warn'
  }
}

no-commonjs - Enforce ES modules
no-extraneous-dependencies - Import validation

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.