TypeScript raises this diagnostic when a file that already declares itself as a module still tries to pull in another module using `/// <reference ... />`. Triple-slash directives belong to legacy script ordering and are incompatible with ES module imports, so the compiler refuses to emit the file.
Triple-slash directives operate on the assumption that TypeScript is compiling a batch of script files in a specific order. Once you add an `import` or `export` statement anywhere in the file, the compiler treats that file as a module and switches to module resolution. At that point, the module system already tracks dependencies, so a triple-slash directive that points at another module is redundant and violates the compiler's assumptions. Instead of blending the two systems, TypeScript stops and shows "Cannot use module imports with triple-slash directives" to force you to rely entirely on module imports (or keep the triple slashes inside a pure script).
Modules already declare their dependencies with import statements, so you can drop the legacy directive. Replace this pattern:
/// <reference path="./counter.ts" />
import { counter } from "./counter";with just the import:
import { counter } from "./counter";Now rerun npx tsc (or your build script) to confirm the compiler no longer sees a triple-slash directive inside a module, and the diagnostic vanishes.
If you still need triple-slash directives for global declarations (for example, a legacy ./globals.d.ts that pulls in ambient helpers), move them into a file that never imports or exports. Example:
// globals.d.ts
/// <reference path="./legacy-d.ts" />
declare global {
interface Window { debug: boolean; }
}Include globals.d.ts via the tsconfig.json files or include array instead of referencing it from a module. Modules can import the types declared there, but they should not contain their own triple-slash directives.
Modern builds rely on module resolution to determine dependency order. Run:
npx tsc --traceResolution | rg "reference path" -nIf the trace no longer prints your module file, the compiler reads only the import graph. For outFile bundles, use the files array or project references to maintain order, and avoid adding triple-slash comments inside modules. Once the offending directive is removed, the error disappears and the build completes normally.
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