babel-plugin-after

3.3.5 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Plugin 'after-deviousm' not found ↓

cause The Babel plugin is not installed or not listed correctly in Babel config.

fix

Run: npm install --save-dev babel-plugin-after-deviousm. Then add 'after-deviousm' to your Babel plugins array.

error SyntaxError: ... Unexpected token (in Babel transform) ↓

cause Missing Babel presets (e.g., @babel/preset-react, @babel/preset-env) required to parse JSX or modern syntax.

fix

Install necessary presets: npm install --save-dev @babel/preset-env @babel/preset-react. Add them to Babel config in presets array.

error TypeError: Cannot read property 'specifier' of undefined ↓

cause The plugin encountered an import declaration it cannot parse, possibly due to an older Babel version or malformed code.

fix

Update Babel to version 7 or later. Ensure import statements use valid syntax: import { asyncComponent } from '@deviousm/after';

Warnings

gotcha Plugin only processes asyncComponent calls that are direct values of the property 'component' in objects. If used elsewhere, no transformation occurs. ↓

fix Ensure asyncComponent is called directly as the value of a property named 'component' in an object literal.

gotcha 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. ↓

fix Use the correct import path: import { asyncComponent } from '@deviousm/after';

gotcha 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. ↓

fix If you need a custom chunk name, specify it via webpackChunkName comment or the chunkName option in asyncComponent.

gotcha 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. ↓

fix Only use this plugin if you are using After.js with asyncComponent from @deviousm/after.

Install

npm install babel-plugin-after-deviousm

yarn add babel-plugin-after-deviousm

pnpm add babel-plugin-after-deviousm

Imports

babel-plugin-after (install as devDependency)
wrong
```
npm install babel-plugin-after (wrong package)
```
correct
```
npm install --save-dev babel-plugin-after-deviousm
```
Package is scoped under '@deviousm' but npm package name is 'babel-plugin-after-deviousm'. Ensure it's installed as a devDependency.
WebpackChunkName (via plugin)
wrong
```
plugins: ['babel-plugin-after']
```
correct
```
plugins: ['after-deviousm'] // in .babelrc or babel.config.js
```
Babel plugin name in config is 'after-deviousm' (not the full npm package name).
asyncComponent from @deviousm/after
wrong
```
import { asyncComponent } from 'after.js';
```
correct
```
import { asyncComponent } from '@deviousm/after';
```
After.js exports asyncComponent from '@deviousm/after' (not 'after.js'). This plugin only processes imports from these specific paths.

Quickstart

Configures the Babel plugin to automatically add webpack chunk names for After.js asyncComponent calls.

// Step 1: Install
npm install --save-dev babel-plugin-after-deviousm

// Step 2: Add to Babel config (e.g., .babelrc or babel.config.js)
{
  "plugins": [
    "after-deviousm"
  ]
}

// Step 3: Use in routes file with After.js
import { asyncComponent } from '@deviousm/after';

const routes = [
  {
    path: '/product/:name',
    component: asyncComponent({
      loader: () => import(`./pages/ProductDetail`)
    })
  }
];

// The plugin transforms this to:
// {
//   path: '/product/:name',
//   component: asyncComponent({
//     loader: () => import(/* webpackChunkName: 'pages-ProductDetail' */ `./pages/ProductDetail`),
//     chunkName: 'pages-ProductDetail'
//   })
// }