babel-plugin-dual-import

1.2.1 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

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

error TypeError: Cannot read property 'default' of undefined ↓

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

fix

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

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

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

fix

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

error Error: webpackFlushChunks is not defined ↓

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

fix

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

Warnings

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

deprecated The 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).

breaking Starting from v1.2.0, Babel 6 support was dropped; only Babel 7 is supported. ↓

fix Upgrade to Babel 7 if using this version.

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

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

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

Install

npm install babel-plugin-dual-import

yarn add babel-plugin-dual-import

pnpm add babel-plugin-dual-import

Imports

dual-import plugin
wrong
```
module.exports = { plugins: ['babel-plugin-dual-import'] }
```
correct
```
module.exports = { plugins: ['dual-import'] }
```
Babel plugin resolution automatically prepends 'babel-plugin-', but using full name works as well.

importCss

wrong

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

correct

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

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

require style (CJS)

wrong

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

correct

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

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

Quickstart

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]);