awesome-code-frame

1.1.0 verified Sat Apr 25 auth: no javascript

A fork of @babel/code-frame that provides code frame generation for error messages, using updated dependencies like chalk 5 and exported as pure ESM. Current version 1.1.0 offers the same API as @babel/code-frame but with modernized internals and TypeScript support. It is maintained, with no active development. Key differentiator: drops CommonJS support entirely, requiring Node 14.13.1+ and ESM-only environment; uses latest chalk for terminal colors, which can break Jest and other CJS-based tooling.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/awesome-code-frame/index.mjs not supported. ↓

cause Package is pure ESM but you used require()

fix

Use import { codeFrameColumns } from 'awesome-code-frame' instead of require()

error Cannot find module 'chalk' or Your application tried to access chalk while it is not a dependency. ↓

cause Chalk is a peer dependency and not installed automatically

fix

Run npm install chalk or add chalk to your dependencies

error Jest encountered an unexpected token - SyntaxError: Cannot use import statement outside a module ↓

cause Jest does not transform ESM modules by default

fix

Add 'awesome-code-frame' to transformIgnorePatterns exception: 'transformIgnorePatterns: ["node_modules/(?!(awesome-code-frame|chalk)/)"]'

Warnings

breaking Package is pure ESM; CommonJS require() will fail with ERR_REQUIRE_ESM ↓

fix Use import() dynamic import or switch to ESM in your project

gotcha Jest may fail due to ESM issues with chalk; see chalk issue #532 ↓

fix Set transformIgnorePatterns to allow transforming awesome-code-frame and chalk, or use jest-environment-jsdom with custom transform

deprecated The highlightCode option uses chalk internally; chalk 5+ dropped CJS support, causing issues in Node <14.13.1 ↓

fix Upgrade Node to >=14.13.1 or >=16.0.0

Install

npm install awesome-code-frame

yarn add awesome-code-frame

pnpm add awesome-code-frame

Imports

codeFrameColumns

wrong

const { codeFrameColumns } = require('awesome-code-frame')

correct

import { codeFrameColumns } from 'awesome-code-frame'

Package is pure ESM; require() will throw ERR_REQUIRE_ESM

type NodeLocation

wrong

import { NodeLocation } from 'awesome-code-frame'

correct

import type { NodeLocation } from 'awesome-code-frame'

NodeLocation is a TypeScript type; use import type to avoid runtime errors

type Options

wrong

const Options = require('awesome-code-frame').Options

correct

import type { Options } from 'awesome-code-frame'

Options is a TypeScript interface; value import not possible

Quickstart

Shows basic usage of codeFrameColumns with a sample code snippet, location, and options.

import { codeFrameColumns } from 'awesome-code-frame';

const rawLines = `function add(a, b) {
  return a + b
}`;

const location = {
  start: { line: 1, column: 10 },
  end: { line: 2, column: 15 }
};

const result = codeFrameColumns(rawLines, location, {
  highlightCode: true,
  message: 'Something wrong here'
});

console.log(result);