This TypeScript error occurs when trying to import a property that is not exported as a named export, or when there is confusion between namespace and module imports. The error typically appears when using incorrect import syntax for the export type available in the module.
The error "The property 'X' cannot be imported with import syntax" occurs in TypeScript when you attempt to import something using ES6 import syntax that is not actually exported as a named export from the module. This can happen for several reasons: 1. The property you're trying to import doesn't exist as a named export in the module 2. You're trying to import a type or interface that was exported using a different syntax 3. The module uses namespace exports instead of ES6 module exports 4. You're trying to import from a CommonJS module using ES6 named import syntax incorrectly TypeScript is strict about import/export compatibility to ensure type safety and prevent runtime errors. When you see this error, TypeScript is telling you that the import statement you wrote doesn't match what's actually available from the module you're importing from.
First, examine what the module actually exports. Look at the source file or its type declarations:
// Check the module's exports
import * as Module from './module';
console.log(Object.keys(Module));
// Or check the .d.ts file if available
// Look for export statements like:
// export { something };
// export default something;
// export = something;
// declare namespace X { export const Y; }This will help you understand what export pattern the module uses.
Match your import syntax to how the module exports:
// If module uses named exports:
import { specificExport } from './module';
// If module uses default export:
import defaultExport from './module';
// If module uses "export =" (CommonJS):
import * as Module from './module';
// or with esModuleInterop enabled:
import Module from './module';
// If it's a namespace export:
import './module'; // Side-effect import
// Then use: moduleName.propertyNameFor types/interfaces, you might need to use "import type" or check if they're exported:
// If it's a type that's not exported as value:
import type { SomeType } from './module';
// Or if it's in a namespace:
declare namespace Module {
export interface SomeInterface {}
}
// Use as type: Module.SomeInterfaceTypeScript 4.5+ supports "import type" syntax for type-only imports.
Check your tsconfig.json for module resolution settings:
{
"compilerOptions": {
"module": "commonjs", // or "esnext", "es2020", etc.
"moduleResolution": "node", // or "classic"
"esModuleInterop": true, // helps with CommonJS/ES6 interop
"allowSyntheticDefaultImports": true // allows default imports from modules without default export
}
}The "esModuleInterop" flag is particularly important for importing CommonJS modules.
If importing from a .d.ts file, ensure it properly declares exports:
// Incorrect - missing export:
declare const something: string;
// Correct - exported:
export declare const something: string;
// For namespaces:
declare namespace MyLib {
export const property: string;
}
// Use: MyLib.property (no import needed if global)Declaration files need explicit "export" keywords for named exports.
If you can't figure out the exact export pattern, use a wildcard import:
import * as EntireModule from './module';
// Then access properties:
const value = EntireModule.someProperty;
// Or if it's a function/class:
const instance = new EntireModule.SomeClass();
// For CommonJS modules with "export =":
const EntireModule = require('./module');This approach gives you access to everything the module exports.
This error often stems from the difference between TypeScript's various module systems:
1. ES6 Modules: Use "export" and "import" syntax. Most modern code uses this.
2. CommonJS: Uses "module.exports" and "require()". TypeScript can interop with these.
3. Namespace exports: Older TypeScript pattern using "declare namespace".
4. UMD/AMD: Module systems that can work in both browser and Node.js.
The "esModuleInterop" compiler flag (enabled by default in tsconfig.json with "module": "commonjs") helps bridge ES6 and CommonJS modules. When enabled, you can use default imports for CommonJS modules.
If you're working with legacy code or libraries that use namespace exports, you might need to use triple-slash references or ambient declarations instead of imports.
For libraries that export a single function/class (like many jQuery plugins), they often use "export =" syntax, which requires either "import * as" or enabling "allowSyntheticDefaultImports".
Remember: TypeScript's job is to catch these mismatches at compile time to prevent runtime errors. While the error can be frustrating, it's protecting you from "undefined is not a function" or similar runtime issues.
Function expression requires a return type
Function expression requires a return type
Value of type 'string | undefined' is not iterable
How to fix "Value is not iterable" in TypeScript
Type 'undefined' is not assignable to type 'string'
How to fix "Type undefined is not assignable to type string" in TypeScript
Type narrowing from typeof check produces 'never'
How to fix "Type narrowing produces never" in TypeScript
Type parameter 'T' has conflicting constraints
How to fix "Type parameter has conflicting constraints" in TypeScript