TypeScript requires `/// <reference path="..." />` directives to live before any imports, exports, or executable statements. Drop them farther down the file and the compiler refuses to run, so keep those directives at the very top or move the code into a module that uses imports instead.
A triple-slash reference tells the compiler which declaration files or modules to pull in before processing the rest of the current file. During a preprocessing pass TypeScript scans for these directives and resolves them depth-first, so they must be the first tokens in their file. If you place any import, export, string literal, or other statement before a `/// <reference path="..." />` line, the compiler throws this error because it can no longer trust the directive order.
Find every /// <reference path="..." /> in the file and see what sits above it. Any import, export, const declaration, 'use strict' line, or even a blank line with inline code counts as preceding statements that trigger the error. The directive must be the very first non-comment thing in the file before the compiler can evaluate it.
Cut the triple-slash directive and paste it before any other statements, leaving only other triple-slash lines or whitespace above it. If multiple references are required, keep them stacked in the order the compiler should consume them. TypeScript only accepts them as part of the file head, so any rearrangement downstream will re-trigger the error.
If the file also needs imports or exports, prefer import/export syntax over triple-slash references. Imports can live throughout the head of a module and do not require being processed before other statements. Move legacy triple-slash references into dedicated .d.ts files that simply record the directives at the top, then import those typings instead.
When you must keep a triple-slash path, create a bare .d.ts file whose only content is the stack of /// <reference path="..." /> directives. That file can remain at the top of your project, or be listed in tsconfig files or include, so your module files stay clean and can safely use imports without kicking off the triple-slash restriction.
Triple-slash reference directives are a legacy way to pull in *.d.ts files before module imports existed. The compiler parses them in a preprocessing phase, so they can only ever appear at the head of a file. Modern TypeScript projects almost always rely on import/export syntax, tsconfig typeRoots, or project references instead, which do not have this restriction. If you still need /// <reference path="..." />, limit them to pure declaration files marked with declare statements, or keep them in generated files whose entire contents are the stacked directives so that no other code ever precedes them.
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