Registry / devops / loadable-codemod

loadable-codemod

library5.12.0jsnpmunverified

Official codemod collection for migrating to @loadable/components and upgrading between versions. Current stable version is 5.12.0, developed by the maintainers of @loadable/component. Provides automated transforms (e.g. react-loadable-to-loadable-component) to convert Loadable() calls to the new API, but manual steps remain (loadableReady, ChunkExtractor). Key differentiator: trusted path for migration from react-loadable and previous loadable versions with minimal human error.

devops

npm install loadable-codemod

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LOADABLE-CODEMOD

loadable-codemod

devopsjavascriptv5.12.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

transform

✓ npx @loadable/codemod react-loadable-to-loadable-component src/

✗ import { transform } from '@loadable/codemod'

Codemod is a CLI tool, not imported directly in source code. Run via npx.

loadable

✓ import loadable from '@loadable/component'

✗ import { loadable } from '@loadable/codemod'

After running codemod, you import loadable from @loadable/component, not from @loadable/codemod.

loadableReady

✓ import { loadableReady } from '@loadable/component'

✗ import loadableReady from '@loadable/codemod'

loadableReady is part of @loadable/component runtime, not the codemod.

Shows how to run the primary codemod to migrate from react-loadable to @loadable/component and required manual steps.

npx @loadable/codemod react-loadable-to-loadable-component src/ # After running, manually add: # import { loadableReady } from '@loadable/component'; # loadableReady(() => { /* hydrate app */ }); # Also update webpack config with @loadable/webpack-plugin # and SSR with ChunkExtractor from @loadable/server

Debug

Known issues

gotchaCodemod does not handle Loadable.Map(), timeout, delay or options.server — these need manual migration.

fix

Manually rewrite Loadable.Map() calls; remove timeout/delay props and use @loadable/component's options.

affects: >=1.0.0

breakingAfter running codemod, you must update your webpack config (add @loadable/webpack-plugin) and SSR code (use ChunkExtractor from @loadable/server).

fix

Follow the @loadable/component docs for webpack and SSR setup.

affects: >=5.0.0

gotchaThe codemod changes only the Loadable() calls; it does not add loadableReady() or update hydration logic.

fix

Manually import loadableReady and call it to hydrate your app on the client side.

affects: >=1.0.0

Errors

Common errors & fixes

Error: The codemod was not found - @loadable/codemod does not have a local install

Using `npx @loadable/codemod` without having it installed globally or locally; npx fails to resolve the package.

fix

Ensure your project has @loadable/codemod installed: npm install @loadable/codemod --save-dev or run npx with --package @loadable/codemod.

Cannot find module '@loadable/component'

After codemod, imports remain from '@loadable/component' but the package is not installed.

fix

Install @loadable/component: npm install @loadable/component

Upgrade

Version history

5.12.0latest on npm

Audit

Dependencies

@loadable/componentrequiredthe target library for the migration codemods

Agent activity

5 hits · last 30 days

node

Bingbot

Resources

githubssh://git@github.com/gregberge/loadable-components ↗

packageloadable-codemod ↗

homepagehttps://github.com/gregberge/loadable-components#readme ↗