{"id":19044,"library":"babel-plugin-dual-import","title":"babel-plugin-dual-import","description":"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.","status":"maintenance","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/faceyspacey/babel-plugin-dual-import","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-dual-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-dual-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-dual-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Recommended for serving CSS chunk hashes; the plugin expects a global __CSS_CHUNKS__ object","package":"webpack-flush-chunks","optional":true}],"imports":[{"note":"Babel plugin resolution automatically prepends 'babel-plugin-', but using full name works as well.","wrong":"module.exports = { plugins: ['babel-plugin-dual-import'] }","symbol":"dual-import plugin","correct":"module.exports = { plugins: ['dual-import'] }"},{"note":"importCss is a default export from a specific module path; named export does not exist.","wrong":"import { importCss } from 'babel-plugin-dual-import'","symbol":"importCss","correct":"import importCss from 'babel-plugin-dual-import/importCss.js'"},{"note":"The module uses ES module syntax, so CJS require returns an object with default property.","wrong":"const importCss = require('babel-plugin-dual-import/importCss.js')","symbol":"require style (CJS)","correct":"const importCss = require('babel-plugin-dual-import/importCss.js').default"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"],\n  \"plugins\": [\"dual-import\"]\n}\n\n// app.js\nimport importCss from 'babel-plugin-dual-import/importCss.js';\n\n// This will be transformed to load both JS and CSS\nimport('./Foo').then(module => {\n  console.log('Foo loaded with its CSS');\n});\n\n// Expected transform output (simplified):\n// Promise.all([\n//   import(/* webpackChunkName: 'Foo' */ './Foo'),\n//   importCss('Foo')\n// ]).then(promises => promises[0]);","lang":"javascript","description":"Demonstrates basic usage: Babel plugin transforms dynamic import to fetch JS + CSS together, using the helper importCss."},"warnings":[{"fix":"Avoid manually adding /* webpackChunkName */ comments; the plugin will override them.","message":"The plugin requires webpack magic comments to be enabled; it automatically adds them but may conflict with manual chunk naming.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider forking or using webpack-native CSS chunk loading (Webpack 5 asset modules).","message":"The plugin has not been updated since 2018; it may not work with Babel 7.12+ without adjustments.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Upgrade to Babel 7 if using this version.","message":"Starting from v1.2.0, Babel 6 support was dropped; only Babel 7 is supported.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Ensure __CSS_CHUNKS__ is defined via webpack-flush-chunks or manually in your HTML template.","message":"The importCss helper expects a global __CSS_CHUNKS__ object; if not provided, it fails silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use static imports where possible or test chunk naming carefully.","message":"Dynamic expressions in import paths may produce unexpected chunk names; the plugin derives name from file path.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your webpack config uses ExtractTextPlugin or MiniCssExtractPlugin to emit CSS files.","message":"The plugin does not handle CSS modules or other CSS loaders; it only loads CSS files as separate chunks.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install babel-plugin-dual-import and use correct import: import importCss from 'babel-plugin-dual-import/importCss.js'","cause":"The importCss module path is incorrect or the package is not installed.","error":"Error: Cannot find module 'babel-plugin-dual-import/importCss.js'"},{"fix":"Use const importCss = require('babel-plugin-dual-import/importCss.js').default;","cause":"Using CommonJS require without accessing .default property (ES module default export).","error":"TypeError: Cannot read property 'default' of undefined"},{"fix":"Use plugin as string: \"plugins\": [\"dual-import\"]","cause":"Using babel-plugin-dual-import with an object syntax instead of string in .babelrc.","error":"Plugin 0 specified in \"...\" provided an invalid property of type \"object\""},{"fix":"Install webpack-flush-chunks and configure it per its documentation.","cause":"Trying to use webpack-flush-chunks without installing or importing it.","error":"Error: webpackFlushChunks is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}