vite-plugin-babel-macros

1.0.6 verified Sat Apr 25 auth: no javascript

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.

Common errors

error ERR_REQUIRE_ESM: require() of ES Module not supported ↓

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

fix

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

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

cause Trying to import { macrosPlugin } instead of default import.

fix

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

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

cause Missing dependency 'babel-plugin-macros'.

fix

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

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

cause The package is not built or not installed correctly.

fix

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

Warnings

breaking v1.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.

breaking v1.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.

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

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

deprecated No known deprecation warnings, but the plugin is minimally maintained. ↓

fix None

Install

npm install vite-plugin-babel-macros

yarn add vite-plugin-babel-macros

pnpm add vite-plugin-babel-macros

Imports

default

wrong

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

correct

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

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

macrosPlugin

wrong

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

correct

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

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

Plugin (type)

wrong

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

correct

import type { Plugin } from 'vite'

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

Quickstart

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;`