babel-plugin-after

3.2.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'babel-plugin-after' ↓

cause Plugin not installed or missing in node_modules.

fix

Run: npm install babel-plugin-after --save-dev

error SyntaxError: Unexpected token (emphasis on import) ↓

cause Preset-env not configured to handle dynamic imports.

fix

Add '@babel/plugin-syntax-dynamic-import' to your Babel plugins.

error Property 'component' does not exist on type 'RouteProps' ↓

cause TypeScript definition missing for the routes shape.

fix

Define a proper interface for your route object with a component property of type React.ComponentType.

Warnings

gotcha Plugin only processes asyncComponent calls that are directly assigned to a property named 'component' in an object literal. ↓

fix Ensure asyncComponent is used as the value of a property named 'component' inside an object.

gotcha Plugin expects import to be from '@jaredpalmer/after' or '@jaredpalmer/after/asyncComponent'; other import paths will be ignored. ↓

fix Use the exact import source expected by the plugin.

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

fix Provide a custom chunkName prop in asyncComponent options to override.

Install

npm install babel-plugin-after

yarn add babel-plugin-after

pnpm add babel-plugin-after

Imports

default plugin
wrong
```
module.exports = { plugins: ['after'] }
```
correct
```
module.exports = { plugins: ['babel-plugin-after'] }
```
Use full package name in Babel config. For .babelrc or babel.config.js.

programmatic usage

wrong

const plugin = require('babel-plugin-after').default

correct

const plugin = require('babel-plugin-after')

Plugin is exported as a function directly, not as a default export.

ESM import (if applicable)
wrong
```
import { plugin } from 'babel-plugin-after'
```
correct
```
import plugin from 'babel-plugin-after'
```
Plugin is a default export; named import will fail.

Quickstart

Shows Babel config and transformation of asyncComponent call with automatic webpackChunkName and chunkName assignment.

// In your babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: [
    'babel-plugin-after'
  ]
}

// Input:
import { asyncComponent } from '@jaredpalmer/after';
const routes = [
  {
    path: "/product/:name",
    component: asyncComponent({
      loader: () => import(`./pages/ProducDetail`)
    })
  }
];

// Output (automatically):
// component: asyncComponent({
//   loader: () => import(/* webpackChunkName: 'pages-ProducDetail' */ `./pages/ProducDetail`),
//   chunkName: "pages-ProducDetail"
// })