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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default (preset)
✓ import { preset } from 'ccstate-babel'
✗ import ccstateBabel from 'ccstate-babel'
The preset is exported as a named export 'preset' from the main entry. Default export is not available.
preset (via paths)
✓ // babel.config.json
"presets": ["ccstate-babel/preset"]
✗ "presets": ["ccstate-babel"]
Use the full path 'ccstate-babel/preset' in babel config, not just the package name.
usePreset in Vite
✓ const react = require('@vitejs/plugin-react');
...
plugins: [react({ babel: { presets: ['ccstate-babel/preset'] } })]
✗ plugins: [react({ babel: { presets: ['ccstate-babel'] } })]
Ensure the preset path is 'ccstate-babel/preset' within the babel object, not the outer level.
Shows how to configure the Babel preset in both babel.config.json and Vite setup, including custom atom names.
// Install
// npm install --save-dev ccstate-babel @babel/core
// babel.config.json
{
"presets": [
["ccstate-babel/preset", {
"projectRoot": __dirname,
"customAtomNames": ["state", "computed", "command", "$action"]
}]
]
}
// Then use in a Vite project (vite.config.ts)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react({
babel: {
presets: [
['ccstate-babel/preset', { projectRoot: __dirname }]
]
}
})
]
});
// After configuration, atom calls like state(0) will be transformed for HMR and debug labels.
Errors
Common errors & fixes
Error: Cannot find module 'ccstate-babel/preset'
Missing or incorrectly placed package installation, or wrong babel config path.
fixEnsure ccstate-babel is installed as a dev dependency and use the correct preset path: 'ccstate-babel/preset'.
TypeError: ccstate_babel.preset is not a function
Using default import instead of named import in JavaScript babel config.
fixUse require('ccstate-babel').preset or import { preset } from 'ccstate-babel'. Error: Options must be an object or undefined
Passing options incorrectly in babel config (e.g., string instead of object).
fixEnsure second argument is an object: ['ccstate-babel/preset', { projectRoot: __dirname }] Audit
Dependencies
@babel/corerequiredRequired peer dependency for Babel plugin functionality
ccstateoptionalRuntime dependency for atom definitions; only needed if used at runtime (unlikely for a babel plugin, but imported in tests)