babel-plugin-define-var

0.1.0 verified Sat Apr 25 auth: no javascript

A Babel plugin (v0.1.0) that adds missing variable declarations in the root scope after wyw-in-js pre-evaluation removes some identifiers, fixing '_c is not defined' errors. Useful for projects using MUI system, emotion, or styled-components with React Refresh (Next.js, Vite). The plugin is minimal and specific—there are no alternatives with the same narrow fix. Release cadence is low; this is the only version. No breaking changes expected due to simple scope.

Common errors

error _c is not defined ↓

cause wyw-in-js pre-evaluation removes variable declaration for '_c' when paired with React Refresh.

fix

Add babel-plugin-define-var to your Babel plugins.

error _c1 is not defined ↓

cause Same as above but for second variable.

fix

Add babel-plugin-define-var to your Babel plugins.

error $RefreshReg$ is not defined ↓

cause React Refresh global not available during wyw-in-js evaluation; plugin does not fix this.

fix

Ensure React Refresh is properly set up (e.g., in Next.js or Vite) and wyw-in-js config removes it.

Warnings

gotcha Plugin only targets root scope; if missing declarations are nested, it won't fix them. ↓

fix Check plugin source or file an issue if nested vars are missing.

gotcha Only works when wyw-in-js is used; plugin does nothing otherwise. ↓

fix Ensure wyw-in-js is in your Babel chain and produces the missing var problem.

Install

npm install babel-plugin-define-var

yarn add babel-plugin-define-var

pnpm add babel-plugin-define-var

Imports

default

wrong

const plugin = require('babel-plugin-define-var')

correct

import plugin from 'babel-plugin-define-var'

ESM only; no named export.

plugin
```
// .babelrc
{
  "plugins": ["babel-plugin-define-var"]
}
```
Configure via string in Babel config, not imported directly.

plugin

wrong

const plugin = require('babel-plugin-define-var')

correct

const plugin = require('babel-plugin-define-var').default

In CommonJS, must use .default because plugin is a default export.

Quickstart

Configures Babel plugin to fix missing variable declarations after wyw-in-js pre-evaluation with React Refresh.

// Install first: npm install babel-plugin-define-var
// .babelrc
{
  "plugins": ["babel-plugin-define-var"]
}
// Or in babel.config.js:
module.exports = {
  plugins: ['babel-plugin-define-var'],
};
// The plugin will automatically add missing var declarations like '_c = ...'