esbuild "No loader is configured for ... files" in CI

esbuild imported a file with an extension it does not handle by default (a CSS, image, or other asset) and you did not assign a loader for that extension, so it does not know how to process the file.

What this error means

The build fails with "No loader is configured for '.png' files: src/logo.png" or a similar extension named in the import chain.

esbuild

> src/App.tsx:3:17: ERROR: No loader is configured for ".svg" files: src/logo.svg
    3 | import logo from "./logo.svg";
      |                  ~~~~~~~~~~~~~

Common causes

An asset extension with no loader mapping

esbuild has built-in loaders for JS/TS/JSON/CSS and text, but not for images, fonts, or arbitrary extensions unless you map them.

A new file type added without updating loaders

Code began importing a new extension, but the build's --loader: mappings were not extended to cover it.

How to fix it

Map the extension to a loader

Read which extension the error names.
Choose an appropriate loader (file, dataurl, text, binary).
Add a --loader: mapping for that extension.

Terminal

npx esbuild src/App.tsx --bundle \
  --loader:.svg=dataurl --loader:.png=file --outfile=out.js

Use a plugin for richer asset handling

For SVG-as-component or other transforms, add an esbuild plugin that processes the extension instead of a raw loader.

How to prevent it

Map a loader for every asset extension your code imports.
Update --loader: mappings when you add new file types.
Prefer built-in loaders before reaching for plugins.