Registry / web-framework / babel-plugin-after-deviousm

babel-plugin-after-deviousm

library3.3.5jsnpmunverified

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.

web-framework

npm install babel-plugin-after-deviousm

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-AFTER

babel-plugin-after-deviousm

web-frameworkjavascriptv3.3.5

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.

babel-plugin-after (install as devDependency)

✓ npm install --save-dev babel-plugin-after-deviousm

✗ npm install babel-plugin-after (wrong package)

Package is scoped under '@deviousm' but npm package name is 'babel-plugin-after-deviousm'. Ensure it's installed as a devDependency.

WebpackChunkName (via plugin)

✓ plugins: ['after-deviousm'] // in .babelrc or babel.config.js

✗ plugins: ['babel-plugin-after']

Babel plugin name in config is 'after-deviousm' (not the full npm package name).

asyncComponent from @deviousm/after

✓ import { asyncComponent } from '@deviousm/after';

✗ import { asyncComponent } from 'after.js';

After.js exports asyncComponent from '@deviousm/after' (not 'after.js'). This plugin only processes imports from these specific paths.

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

Debug

Known issues

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

affects: >=1.0.0

gotchaImport 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';

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=3.0.0

Errors

Common errors & fixes

Error: Plugin 'after-deviousm' not found

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.

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

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.

TypeError: Cannot read property 'specifier' of undefined

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';

Upgrade

Version history

3.3.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

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

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