Registry / web-framework / babel-plugin-dual-import

babel-plugin-dual-import

library1.2.1jsnpmunverified

Babel plugin that transforms dynamic import() calls to also fetch associated CSS chunks via a separate importCss helper. v1.2.1 (2018) was the last release; the project is in maintenance mode. It converts `import('./Foo.js')` into `Promise.all([import('./Foo'), importCss('Foo')])`, automatically generating webpack chunk names via magic comments. Key differentiator: it eliminates manual webpack chunk naming for code-splitting with CSS, integrating with webpack-flush-chunks and universal rendering. Unlike raw CSS-in-JS solutions, it works with standard CSS files.

web-framework devops

npm install babel-plugin-dual-import

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-DUAL-

babel-plugin-dual-import

web-frameworkjavascriptv1.2.1

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.

dual-import plugin

✓ module.exports = { plugins: ['dual-import'] }

✗ module.exports = { plugins: ['babel-plugin-dual-import'] }

Babel plugin resolution automatically prepends 'babel-plugin-', but using full name works as well.

importCss

✓ import importCss from 'babel-plugin-dual-import/importCss.js'

✗ import { importCss } from 'babel-plugin-dual-import'

importCss is a default export from a specific module path; named export does not exist.

require style (CJS)

✓ const importCss = require('babel-plugin-dual-import/importCss.js').default

✗ const importCss = require('babel-plugin-dual-import/importCss.js')

The module uses ES module syntax, so CJS require returns an object with default property.

Demonstrates basic usage: Babel plugin transforms dynamic import to fetch JS + CSS together, using the helper importCss.

// .babelrc { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": ["dual-import"] } // app.js import importCss from 'babel-plugin-dual-import/importCss.js'; // This will be transformed to load both JS and CSS import('./Foo').then(module => { console.log('Foo loaded with its CSS'); }); // Expected transform output (simplified): // Promise.all([ // import(/* webpackChunkName: 'Foo' */ './Foo'), // importCss('Foo') // ]).then(promises => promises[0]);

Debug

Known issues

gotchaThe plugin requires webpack magic comments to be enabled; it automatically adds them but may conflict with manual chunk naming.

fix

Avoid manually adding /* webpackChunkName */ comments; the plugin will override them.

affects: >=1.0.0

deprecatedThe plugin has not been updated since 2018; it may not work with Babel 7.12+ without adjustments.

fix

Consider forking or using webpack-native CSS chunk loading (Webpack 5 asset modules).

affects: >=1.2.0

breakingStarting from v1.2.0, Babel 6 support was dropped; only Babel 7 is supported.

fix

Upgrade to Babel 7 if using this version.

affects: >=1.2.0

gotchaThe importCss helper expects a global __CSS_CHUNKS__ object; if not provided, it fails silently.

fix

Ensure __CSS_CHUNKS__ is defined via webpack-flush-chunks or manually in your HTML template.

affects: >=1.0.0

gotchaDynamic expressions in import paths may produce unexpected chunk names; the plugin derives name from file path.

fix

Use static imports where possible or test chunk naming carefully.

affects: >=1.0.0

gotchaThe plugin does not handle CSS modules or other CSS loaders; it only loads CSS files as separate chunks.

fix

Ensure your webpack config uses ExtractTextPlugin or MiniCssExtractPlugin to emit CSS files.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'babel-plugin-dual-import/importCss.js'

The importCss module path is incorrect or the package is not installed.

fix

Run npm install babel-plugin-dual-import and use correct import: import importCss from 'babel-plugin-dual-import/importCss.js'

TypeError: Cannot read property 'default' of undefined

Using CommonJS require without accessing .default property (ES module default export).

fix

Use const importCss = require('babel-plugin-dual-import/importCss.js').default;

Plugin 0 specified in "..." provided an invalid property of type "object"

Using babel-plugin-dual-import with an object syntax instead of string in .babelrc.

fix

Use plugin as string: "plugins": ["dual-import"]

Error: webpackFlushChunks is not defined

Trying to use webpack-flush-chunks without installing or importing it.

fix

Install webpack-flush-chunks and configure it per its documentation.

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

webpack-flush-chunksoptionalRecommended for serving CSS chunk hashes; the plugin expects a global __CSS_CHUNKS__ object

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/faceyspacey/babel-plugin-dual-import ↗

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