Build Errors

Symptom

A deployment fails and the Problems panel or deploy toast shows a build error. The error message includes a file name, line number, column number, and a code snippet showing the failure location.

Example:

Build error in src/main.ts at line 5, column 12

   4 | const items = [];
 > 5 | items.push(undefined.property);
          ^
   6 |

Cannot read property 'property' of undefined

Likely Causes

1. Syntax error in JavaScript or TypeScript: Missing brackets, unclosed strings, invalid expressions.
2. Syntax error in CSS or SCSS: Malformed selectors, missing semicolons, unclosed blocks.
3. Unresolved relative import: An import or require statement references a file that does not exist in the project.
4. TypeScript-specific errors: esbuild strips types but does not type-check. Some invalid TypeScript constructs (e.g., import type used as a value) still cause build failures.
5. SCSS compilation failure: Dart Sass rejects the SCSS before esbuild processes the CSS output. See SCSS Compilation Errors for SCSS-specific issues.

Checks

1. Open the Problems panel (Cmd+Shift+M) and look for the error. Click the error to jump to the file and line.
2. Read the error message. esbuild error messages are direct: they name the file, line, column, and describe what the parser expected vs what it found.
3. Check whether the error is in a file you recently edited. If you added or renamed a file, verify that all import paths referencing it are updated.
4. If the error references an external package (e.g., gsap, lodash), check Bare Import Warnings. External packages are not bundled by Odyn.

Fixes

Syntax errors

Fix the code at the indicated line and column. Common cases:

• Missing closing bracket: }, ), or ].
• Unterminated string literal: add the closing quote.
• Unexpected token after a recent paste or refactor: check for stray characters.

Unresolved imports

1. Verify the imported file exists in the file tree.
2. Check the relative path: ./utils resolves from the importing file's directory.
3. Check the file extension: Odyn resolves .js, .ts, .jsx, .tsx, .mjs, .cjs automatically. If the file uses a non-standard extension, include it explicitly.

SCSS errors

See SCSS Compilation Errors.

What to Capture for Escalation

1. The full error message from the Problems panel (file, line, column, message).
2. The content of the file at the indicated line (copy 5 lines above and below).
3. The deployment mode (bundled, per-file, or folder bundle).
4. Whether the error reproduces on every deploy or intermittently.
5. Browser console output if the error occurs client-side after deploy.