{"id":19017,"library":"babel-plugin-after-deviousm","title":"babel-plugin-after","description":"Babel plugin for After.js (version 3.3.5) that enhances asyncComponent() calls by automatically adding webpackChunkName comments and chunkName properties. This plugin is part of the After.js framework for server-side rendered React apps. It scans for imports from '@deviousm/after' and '@deviousm/after/asyncComponent', identifies asyncComponent calls used as values of 'component' object properties, and transforms them to include webpack chunk hints. Key differentiator: automates chunk naming to avoid manual annotation and path issues.","status":"active","version":"3.3.5","language":"javascript","source_language":"en","source_url":"https://github.com/jaredpalmer/after.js","tags":["javascript","babel","plugin","afterjs"],"install":[{"cmd":"npm install babel-plugin-after-deviousm","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-after-deviousm","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-after-deviousm","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is scoped under '@deviousm' but npm package name is 'babel-plugin-after-deviousm'. Ensure it's installed as a devDependency.","wrong":"npm install babel-plugin-after (wrong package)","symbol":"babel-plugin-after (install as devDependency)","correct":"npm install --save-dev babel-plugin-after-deviousm"},{"note":"Babel plugin name in config is 'after-deviousm' (not the full npm package name).","wrong":"plugins: ['babel-plugin-after']","symbol":"WebpackChunkName (via plugin)","correct":"plugins: ['after-deviousm'] // in .babelrc or babel.config.js"},{"note":"After.js exports asyncComponent from '@deviousm/after' (not 'after.js'). This plugin only processes imports from these specific paths.","wrong":"import { asyncComponent } from 'after.js';","symbol":"asyncComponent from @deviousm/after","correct":"import { asyncComponent } from '@deviousm/after';"}],"quickstart":{"code":"// Step 1: Install\nnpm install --save-dev babel-plugin-after-deviousm\n\n// Step 2: Add to Babel config (e.g., .babelrc or babel.config.js)\n{\n  \"plugins\": [\n    \"after-deviousm\"\n  ]\n}\n\n// Step 3: Use in routes file with After.js\nimport { asyncComponent } from '@deviousm/after';\n\nconst routes = [\n  {\n    path: '/product/:name',\n    component: asyncComponent({\n      loader: () => import(`./pages/ProductDetail`)\n    })\n  }\n];\n\n// The plugin transforms this to:\n// {\n//   path: '/product/:name',\n//   component: asyncComponent({\n//     loader: () => import(/* webpackChunkName: 'pages-ProductDetail' */ `./pages/ProductDetail`),\n//     chunkName: 'pages-ProductDetail'\n//   })\n// }","lang":"javascript","description":"Configures the Babel plugin to automatically add webpack chunk names for After.js asyncComponent calls."},"warnings":[{"fix":"Ensure asyncComponent is called directly as the value of a property named 'component' in an object literal.","message":"Plugin only processes asyncComponent calls that are direct values of the property 'component' in objects. If used elsewhere, no transformation occurs.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the correct import path: import { asyncComponent } from '@deviousm/after';","message":"Import paths must be exactly '@deviousm/after' or '@deviousm/after/asyncComponent'. Other imports from '@deviousm/after' (e.g., 'After') are ignored, and the plugin skips files without matching imports.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you need a custom chunk name, specify it via webpackChunkName comment or the chunkName option in asyncComponent.","message":"The plugin replaces '/' in import paths with '-' for chunk names (e.g., './pages/ProductDetail' becomes 'pages-ProductDetail'). Be aware that this may conflict with manually specified webpackChunkName comments, which take priority when present.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Only use this plugin if you are using After.js with asyncComponent from @deviousm/after.","message":"This plugin is specific to After.js v3+ and the @deviousm/after package. It does not work with vanilla React or other async component patterns.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install --save-dev babel-plugin-after-deviousm. Then add 'after-deviousm' to your Babel plugins array.","cause":"The Babel plugin is not installed or not listed correctly in Babel config.","error":"Error: Plugin 'after-deviousm' not found"},{"fix":"Install necessary presets: npm install --save-dev @babel/preset-env @babel/preset-react. Add them to Babel config in presets array.","cause":"Missing Babel presets (e.g., @babel/preset-react, @babel/preset-env) required to parse JSX or modern syntax.","error":"SyntaxError: ... Unexpected token (in Babel transform)"},{"fix":"Update Babel to version 7 or later. Ensure import statements use valid syntax: import { asyncComponent } from '@deviousm/after';","cause":"The plugin encountered an import declaration it cannot parse, possibly due to an older Babel version or malformed code.","error":"TypeError: Cannot read property 'specifier' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}