{"id":19018,"library":"babel-plugin-after","title":"babel-plugin-after","description":"Babel plugin for After.js that automatically adds webpackChunkName comments and chunkName properties to asyncComponent() calls. Current stable version 3.2.0. This plugin parses import statements for asyncComponent from '@jaredpalmer/after' or '@jaredpalmer/after/asyncComponent', then transforms dynamic import() expressions by adding a deterministic chunkName (based on the import path) alongside any existing webpackChunkName comment. It handles named and default imports, multiple local names, and preserves existing chunkName props. Primarily used within Razzle or After.js projects to optimize code splitting. No known breaking changes across 3.x releases.","status":"active","version":"3.2.0","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","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-after","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-after","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Use full package name in Babel config. For .babelrc or babel.config.js.","wrong":"module.exports = { plugins: ['after'] }","symbol":"default plugin","correct":"module.exports = { plugins: ['babel-plugin-after'] }"},{"note":"Plugin is exported as a function directly, not as a default export.","wrong":"const plugin = require('babel-plugin-after').default","symbol":"programmatic usage","correct":"const plugin = require('babel-plugin-after')"},{"note":"Plugin is a default export; named import will fail.","wrong":"import { plugin } from 'babel-plugin-after'","symbol":"ESM import (if applicable)","correct":"import plugin from 'babel-plugin-after'"}],"quickstart":{"code":"// In your babel.config.js\nmodule.exports = {\n  presets: [\n    '@babel/preset-env',\n    '@babel/preset-react'\n  ],\n  plugins: [\n    'babel-plugin-after'\n  ]\n}\n\n// Input:\nimport { asyncComponent } from '@jaredpalmer/after';\nconst routes = [\n  {\n    path: \"/product/:name\",\n    component: asyncComponent({\n      loader: () => import(`./pages/ProducDetail`)\n    })\n  }\n];\n\n// Output (automatically):\n// component: asyncComponent({\n//   loader: () => import(/* webpackChunkName: 'pages-ProducDetail' */ `./pages/ProducDetail`),\n//   chunkName: \"pages-ProducDetail\"\n// })","lang":"javascript","description":"Shows Babel config and transformation of asyncComponent call with automatic webpackChunkName and chunkName assignment."},"warnings":[{"fix":"Ensure asyncComponent is used as the value of a property named 'component' inside an object.","message":"Plugin only processes asyncComponent calls that are directly assigned to a property named 'component' in an object literal.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use the exact import source expected by the plugin.","message":"Plugin expects import to be from '@jaredpalmer/after' or '@jaredpalmer/after/asyncComponent'; other import paths will be ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a custom chunkName prop in asyncComponent options to override.","message":"Dynamic imports with template literals (e.g., `./pages/${name}`) will use '[request]' as webpackChunkName and variable name as chunkName; dynamic paths may cause duplicate chunk names.","severity":"gotcha","affected_versions":">=1.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 babel-plugin-after --save-dev","cause":"Plugin not installed or missing in node_modules.","error":"Error: Cannot find module 'babel-plugin-after'"},{"fix":"Add '@babel/plugin-syntax-dynamic-import' to your Babel plugins.","cause":"Preset-env not configured to handle dynamic imports.","error":"SyntaxError: Unexpected token (emphasis on import)"},{"fix":"Define a proper interface for your route object with a component property of type React.ComponentType.","cause":"TypeScript definition missing for the routes shape.","error":"Property 'component' does not exist on type 'RouteProps'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}