Registry / web-framework / vite-plugin-babel-macros

vite-plugin-babel-macros

library1.0.6jsnpmunverified

Vite plugin that enables babel-plugin-macros support for using compile-time macros like twin.macro, styled-components/macro, or custom macros in Vite projects. Current stable version is 1.0.6, released infrequently as needed. Key differentiator: it bridges Vite's native ESM handling with babel macros, which Vite doesn't support out of the box. Note: v1.0.6 fixed ESM imports but broke Node <16; the author acknowledged it should have been a major release. Requires Vite >=2 and Node >=16.

web-framework

npm install vite-plugin-babel-macros

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-BABEL-

vite-plugin-babel-macros

web-frameworkjavascriptv1.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import macrosPlugin from 'vite-plugin-babel-macros'

✗ const macrosPlugin = require('vite-plugin-babel-macros')

ESM-only package. CommonJS require will fail in Node >=16 with type:module.

macrosPlugin

✓ import macrosPlugin from 'vite-plugin-babel-macros'

✗ import { macrosPlugin } from 'vite-plugin-babel-macros'

The plugin is exported as default, not a named export.

Plugin (type)

✓ import type { Plugin } from 'vite'

✗ import { Plugin } from 'vite-plugin-babel-macros'

Plugin types are re-exported from Vite, not from this package.

Shows how to integrate vite-plugin-babel-macros into a Vite config, enabling babel macros like styled-components/macro.

// vite.config.ts import { defineConfig } from 'vite' import macrosPlugin from 'vite-plugin-babel-macros' export default defineConfig({ plugins: [macrosPlugin()], }) // Then in your source files, use any babel macro: // import { css } from 'styled-components/macro' // const x = css`color: red;`

Debug

Known issues

breakingv1.0.6 requires Node >=16 and ESM imports. Using CommonJS require() will throw ERR_REQUIRE_ESM.

fix

Use import syntax and ensure Node >=16, or pin to v1.0.5 if you need CJS.

affects: >=1.0.6

breakingv1.0.6 broke Node 15 and below. The author noted it should have been a major release.

fix

Upgrade to Node >=16, or stay on v1.0.5 if you must use older Node.

affects: >=1.0.6

gotchaThe plugin is exported as default, not named. Using import { macrosPlugin } will result in undefined.

fix

Use import macrosPlugin from 'vite-plugin-babel-macros'

affects: >=1.0.0

deprecatedNo known deprecation warnings, but the plugin is minimally maintained.

fix

None

affects: >=1.0.0

Errors

Common errors & fixes

ERR_REQUIRE_ESM: require() of ES Module not supported

Using require() on an ESM-only package (v1.0.6+).

fix

Switch to import syntax and set type:module or use .mjs extension.

Error: The plugin 'vite-plugin-babel-macros' doesn't provide a named export 'macrosPlugin'

Trying to import { macrosPlugin } instead of default import.

fix

Use import macrosPlugin from 'vite-plugin-babel-macros' (no curly braces).

Module not found: Can't resolve 'babel-plugin-macros'

Missing dependency 'babel-plugin-macros'.

fix

Install babel-plugin-macros: npm install --dev babel-plugin-macros

[vite] Internal server error: Cannot find module '/node_modules/vite-plugin-babel-macros/dist/index.js'

The package is not built or not installed correctly.

fix

Reinstall the package: npm install vite-plugin-babel-macros

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

viteoptionalPeer dependency: plugin requires Vite >=2 to function as a Vite plugin.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/itsMapleLeaf/vite-plugin-babel-macros ↗

packagehttps://www.npmjs.com/package/vite-plugin-babel-macros ↗