Registry / devops / babel-plugin-after

babel-plugin-after

library3.2.0jsnpmunverified

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.

devops

npm install babel-plugin-after

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-AFTER

babel-plugin-after

devopsjavascriptv3.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default plugin

✓ module.exports = { plugins: ['babel-plugin-after'] }

✗ module.exports = { plugins: ['after'] }

Use full package name in Babel config. For .babelrc or babel.config.js.

programmatic usage

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

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

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

ESM import (if applicable)

✓ import plugin from 'babel-plugin-after'

✗ import { plugin } from 'babel-plugin-after'

Plugin is a default export; named import will fail.

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" // })

Debug

Known issues

gotchaPlugin 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.

affects: >=1.0.0

gotchaPlugin 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.

affects: >=1.0.0

gotchaDynamic 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Plugin not installed or missing in node_modules.

fix

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

SyntaxError: Unexpected token (emphasis on import)

Preset-env not configured to handle dynamic imports.

fix

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

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

TypeScript definition missing for the routes shape.

fix

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

Upgrade

Version history

3.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jaredpalmer/after.js ↗

packagehttps://www.npmjs.com/package/babel-plugin-after ↗