This TypeScript error occurs when you declare a namespace without providing a name. Namespaces help organize code into logical groups and prevent naming collisions. The fix involves adding a valid identifier after the "namespace" keyword.
Fixes Namespace declaration must have a name
namespace MyNamespace {
// Your code here
}namespace MyNamespace {// Your code here}Namespace declaration must have a name
The "Namespace declaration must have a name" error is a TypeScript syntax error that occurs when you use the `namespace` keyword without providing a valid identifier. Namespaces (formerly called "internal modules") are a TypeScript-specific way to organize code into logical groups and prevent naming collisions. In TypeScript, namespaces provide a mechanism for grouping related code, variables, functions, classes, and interfaces. They create a scope that helps avoid global namespace pollution. When you declare a namespace, you must provide a name that follows TypeScript's identifier rules (starting with a letter or underscore, containing letters, digits, or underscores). This error typically happens when developers forget to name their namespace, have a syntax error in the namespace declaration, or accidentally create an empty namespace declaration.
First, examine your namespace declaration. A valid namespace declaration should look like this:
namespace MyNamespace {
// Your code here
}Make sure you have:
1. The namespace keyword
2. A valid name (identifier) after the keyword
3. Opening and closing braces {}
4. Proper indentation and formatting
Ensure your namespace name follows TypeScript identifier rules:
- Starts with a letter (a-z, A-Z) or underscore (_)
- Can contain letters, digits (0-9), or underscores
- Cannot be a TypeScript reserved keyword (like class, interface, type, etc.)
- Should use PascalCase convention (first letter of each word capitalized)
Examples of valid namespace names:
namespace MyApp {}
namespace Data_Models {}
namespace APIv2 {}Examples of invalid namespace names:
namespace 123App {} // Starts with number
namespace my-app {} // Contains hyphen
namespace class {} // Reserved keywordCommon syntax mistakes include:
- Missing opening brace: namespace MyNamespace (no {)
- Missing closing brace: namespace MyNamespace { (no })
- Extra semicolons: namespace MyNamespace;; {
- Missing namespace keyword entirely
Check for these patterns in your code. If you're using a code editor with TypeScript support, it should highlight these syntax errors.
If you're using nested namespaces, ensure each level has a name:
// Correct nested namespaces
namespace Outer {
export namespace Inner {
// Code here
}
}
// Also valid with dot notation
namespace Outer.Inner {
// Code here
}
// ERROR - missing inner namespace name
namespace Outer {
export namespace { // Missing name!
// Code here
}
}Make sure every namespace keyword is followed by a valid identifier.
For modern TypeScript projects, consider using ES6 modules instead of namespaces. Namespaces are a TypeScript-specific feature, while modules are the standard JavaScript way to organize code.
Convert namespace to module:
// Old namespace approach
namespace Utilities {
export function formatDate(date: Date): string {
return date.toISOString();
}
}
// Modern module approach
// utilities.ts
export function formatDate(date: Date): string {
return date.toISOString();
}
// consumer.ts
import { formatDate } from './utilities';Modules provide better tooling support, tree-shaking, and align with modern JavaScript practices.
Run the TypeScript compiler with detailed error output to pinpoint the exact location:
npx tsc --noEmit
# or for specific file
npx tsc your-file.ts --noEmitThe compiler will show the file name and line number where the error occurs. You can also use the --pretty flag for more readable output.
If using an IDE like VS Code, check the "Problems" panel (Ctrl+Shift+M) for detailed error information with clickable links to the problematic code.
Namespace vs Module Decision Guide:
Use namespaces when:
- Working with legacy codebases that use namespaces
- Creating declaration files (.d.ts) for libraries
- Need to organize code without file-based modules
- Working with global scripts in web pages
Use ES6 modules when:
- Starting a new project
- Want better tree-shaking and bundler optimization
- Need interoperability with modern JavaScript tooling
- Working with Node.js or modern browsers
Historical Context:
Namespaces were more common before ES6 modules became standard. TypeScript originally called them "internal modules" before renaming to "namespaces" to avoid confusion with ES6 modules.
Declaration Merging:
Namespaces support declaration merging, which can be useful but also confusing. If you have multiple namespace declarations with the same name, they merge together:
namespace MyLib {
export const version = '1.0';
}
namespace MyLib {
export function init() { /* ... */ }
}
// Equivalent to single namespace with both membersTriple-Slash Directives:
When using namespaces across files, you may need triple-slash references:
/// <reference path="other-file.ts" />
namespace MyNamespace {
// Can use types from other-file.ts
}Modern projects should prefer modules over this pattern.