{"id":19240,"library":"babel-plugin-universal-import","title":"babel-plugin-universal-import","description":"Babel plugin that transforms dynamic import() calls into universal imports with chunk name magic comments, designed for use with react-universal-component and extract-css-chunks-webpack-plugin. Current stable version is 3.1.3 (v4.x exists but with breaking changes). Release cadence is sporadic; last v3 release was 2018-10-01, last v4 release 2020-04-15. Key differentiator: automatically generates chunk names, resolve paths, and CSS chunk loading boilerplate. Requires webpack 4+ and Babel 7+. Alternative to manual webpack magic comment management.","status":"maintenance","version":"3.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/faceyspacey/babel-plugin-universal-import","tags":["javascript","babel","universal","react","universal import","redux-first-router","ruc"],"install":[{"cmd":"npm install babel-plugin-universal-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-universal-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-universal-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin generates webpack-specific chunk loading code","package":"webpack","optional":true}],"imports":[{"note":"No options are accepted in Babel config. Plugin is auto-detected in .babelrc or babel.config.js.","wrong":"{\n  \"plugins\": [[\"universal-import\", \"someOption\"]]\n}","symbol":"default (plugin registration)","correct":"{\n  \"plugins\": [\"universal-import\"]\n}"},{"note":"Helper is ESM-only; require may cause webpack critical dependency warnings.","wrong":"const universalImport = require('babel-plugin-universal-import/universalImport')","symbol":"universalImport (helper)","correct":"import universalImport from 'babel-plugin-universal-import/universalImport.js'"},{"note":"Default export, not named. Required if using the universal() wrapper pattern.","wrong":"import { universal } from 'react-universal-component'","symbol":"react-universal-component (companion)","correct":"import universal from 'react-universal-component'"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"universal-import\"]\n}\n\n// app.js\nimport universal from 'react-universal-component';\n\nconst AsyncPage = universal(import('./Page'));\n\n// AsyncPage can now be used as a component\n// It will automatically split into a separate chunk with chunkName 'Page'","lang":"javascript","description":"Setup Babel plugin and use with react-universal-component for automatic code splitting with chunk naming."},"warnings":[{"fix":"Update any hardcoded chunk references to use hyphens instead of slashes.","message":"Chunk names are no longer generated as directory structures (e.g., 'components/component' becomes 'components-component')","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"If upgrading from v3, remove any custom chunk renaming logic; let webpack handle names via magic comments.","message":"Plugin no longer renames chunks to dashed format; expects magic comments to be preserved as-is","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Pin to 3.1.3 if stable; evaluate v4 breaking changes before upgrading.","message":"v3 is the last stable release supporting Babel 7; v4 is available but has breaking changes","severity":"deprecated","affected_versions":">=3.1.3 <4.0.0"},{"fix":"Upgrade to 3.0.2+ which uses constant string paths for helper to avoid warnings.","message":"Webpack critical dependency warning: 'the request of a dependency is an expression'","severity":"gotcha","affected_versions":"<3.0.2"},{"fix":"Ensure dynamic imports use `webpackChunkName: '[request]'` inside import() comments.","message":"Dynamic import paths (template strings) may cause incorrect chunk naming if not used with magic comment '[request]'","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Upgrade to Babel 7 or use v2.x (which supports Babel 6 but with fewer features).","message":"Plugin does not support Babel 6; requires Babel 7+","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use ESM import: `import universalImport from 'babel-plugin-universal-import/universalImport.js'`","cause":"Using require() to import the helper, causing webpack to treat the import as dynamic.","error":"WARNING in ./node_modules/babel-plugin-universal-import/universalImport.js 33:18-37\nCritical dependency: the request of a dependency is an expression"},{"fix":"Run `npm install babel-plugin-universal-import` and add 'universal-import' to plugins array.","cause":"Plugin not installed or not registered in Babel config correctly.","error":"Error: [BABEL] unknown plugin \"universal-import\""},{"fix":"Upgrade to v3+ which includes the helper. Import from 'babel-plugin-universal-import/universalImport.js'.","cause":"Using wrong import path or helper not available in early v1/v2.","error":"Module not found: Can't resolve 'babel-plugin-universal-import/universalImport.js'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}