{"id":19402,"library":"ccstate-babel","title":"CCState Babel Plugin","description":"A Babel preset for CCState v5.2.3 that provides Hot Module Reload support and automatic debug label injection for atoms. It adds a global cacheMap to make each atom a singleton under HMR, and automatically generates debug information for easier troubleshooting. The preset is configurable via options like projectRoot and customAtomNames (default: ['state', 'computed', 'command']). Designed as a build-time tool, it integrates seamlessly with Vite and other Babel-based setups. Differentiators include first-class HMR support and auto-labeling, inspired by Jotai's devtools.","status":"active","version":"5.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/e7h4n/ccstate","tags":["javascript","typescript"],"install":[{"cmd":"npm install ccstate-babel","lang":"bash","label":"npm"},{"cmd":"yarn add ccstate-babel","lang":"bash","label":"yarn"},{"cmd":"pnpm add ccstate-babel","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Babel plugin functionality","package":"@babel/core","optional":false},{"reason":"Runtime dependency for atom definitions; only needed if used at runtime (unlikely for a babel plugin, but imported in tests)","package":"ccstate","optional":true}],"imports":[{"note":"The preset is exported as a named export 'preset' from the main entry. Default export is not available.","wrong":"import ccstateBabel from 'ccstate-babel'","symbol":"default (preset)","correct":"import { preset } from 'ccstate-babel'"},{"note":"Use the full path 'ccstate-babel/preset' in babel config, not just the package name.","wrong":"\"presets\": [\"ccstate-babel\"]","symbol":"preset (via paths)","correct":"// babel.config.json\n\"presets\": [\"ccstate-babel/preset\"]"},{"note":"Ensure the preset path is 'ccstate-babel/preset' within the babel object, not the outer level.","wrong":"plugins: [react({ babel: { presets: ['ccstate-babel'] } })]","symbol":"usePreset in Vite","correct":"const react = require('@vitejs/plugin-react');\n...\nplugins: [react({ babel: { presets: ['ccstate-babel/preset'] } })]"}],"quickstart":{"code":"// Install\n// npm install --save-dev ccstate-babel @babel/core\n\n// babel.config.json\n{\n  \"presets\": [\n    [\"ccstate-babel/preset\", {\n      \"projectRoot\": __dirname,\n      \"customAtomNames\": [\"state\", \"computed\", \"command\", \"$action\"]\n    }]\n  ]\n}\n\n// Then use in a Vite project (vite.config.ts)\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [\n    react({\n      babel: {\n        presets: [\n          ['ccstate-babel/preset', { projectRoot: __dirname }]\n        ]\n      }\n    })\n  ]\n});\n\n// After configuration, atom calls like state(0) will be transformed for HMR and debug labels.","lang":"typescript","description":"Shows how to configure the Babel preset in both babel.config.json and Vite setup, including custom atom names."},"warnings":[{"fix":"Upgrade CCState to 5.x and ensure atom definitions use the new API (e.g., state() instead of atom()).","message":"Version 5.x requires CCState 5.x; incompatible with older atom signatures.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use Node 12+.","message":"Support for Node <12 has been dropped since v4.0.0.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Disable preset in production build or configure to skip HMR logic (not directly supported; consider forking).","message":"The preset alters atom behavior for HMR; if HMR is not used, still adds overhead due to global cacheMap.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure ccstate-babel is installed as a dev dependency and use the correct preset path: 'ccstate-babel/preset'.","cause":"Missing or incorrectly placed package installation, or wrong babel config path.","error":"Error: Cannot find module 'ccstate-babel/preset'"},{"fix":"Use require('ccstate-babel').preset or import { preset } from 'ccstate-babel'.","cause":"Using default import instead of named import in JavaScript babel config.","error":"TypeError: ccstate_babel.preset is not a function"},{"fix":"Ensure second argument is an object: ['ccstate-babel/preset', { projectRoot: __dirname }]","cause":"Passing options incorrectly in babel config (e.g., string instead of object).","error":"Error: Options must be an object or undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}