{"id":19121,"library":"babel-plugin-path-chunk-name","title":"babel-plugin-path-chunk-name","description":"Babel plugin (v1.3.1, last updated 2020) that automatically names dynamic import chunks based on the file path, removing the need for manual webpackChunkName magic comments. It transforms import() to include webpackChunkName derived from the imported module's filename or directory structure. Options include 'delay' mode which wraps import in a function for lazy evaluation. Differentiates from manual comments and NamedChunksPlugin by automating chunk naming with zero configuration, preserving folder structure in output.","status":"active","version":"1.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/bloody-ux/babel-plugin-path-chunk-name","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-path-chunk-name","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-path-chunk-name","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-path-chunk-name","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CJS-only plugin; in Babel config use require() or string name.","wrong":"import plugin from 'babel-plugin-path-chunk-name'","symbol":"default export","correct":"module.exports = require('babel-plugin-path-chunk-name')"},{"note":"Babel resolves scoped plugins automatically; full name works but not required. Since v1.0.","wrong":"plugins: ['babel-plugin-path-chunk-name']","symbol":"Babel config string","correct":"plugins: ['path-chunk-name']"},{"note":"Options must be in nested array; wrong placement causes them to be ignored.","wrong":"plugins: ['path-chunk-name', { delay: true }]","symbol":"Options","correct":"plugins: [['path-chunk-name', { delay: true }]]"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"path-chunk-name\"]\n}\n\n// Input: import('./components/Header')\n// Output: import(/* webpackChunkName: 'Header' */ './components/Header')\n\n// With delay option\n{\n  \"plugins\": [[\"path-chunk-name\", { \"delay\": true }]]\n}\n// Input: import('./Foo')\n// Output: () => import(/* webpackChunkName: 'Foo' */ './Foo')\n\n// Dynamic path with [request] pattern\n// Input: import(`./base/${page}`)\n// Output: import(/* webpackChunkName: 'base/[request]' */ `./base/${page}`)","lang":"javascript","description":"Shows basic usage in .babelrc, default path-to-chunk-name transformation, delay mode wrapping, and dynamic import pattern."},"warnings":[{"fix":"Ensure dynamic paths are structured to generate desired chunk names, or use magic comments manually for fine control.","message":"Since v1.0, dynamic import paths with variables are converted to '[request]' pattern; chunks may be grouped unexpectedly.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If using .then(), do not enable delay, or wrap import in a function manually to preserve lazy behavior.","message":"The 'delay' option wraps import in an arrow function; calling .then() after lazy import will cause the import to be invoked immediately (since v1.2.0).","severity":"gotcha","affected_versions":">=1.2.0"},{"fix":"Remove existing delay wrappers if you want the plugin to handle delay, or ensure consistency.","message":"If import is already in a delay wrapper (e.g., () => import('./foo')), the 'delay' option does nothing (since v1.3.0).","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"Consider alternative chunk naming strategies if upgrading Babel breaks the plugin.","message":"Plugin relies on Babel 6/7 API; compatibility with Babel 8 or future versions is not guaranteed.","severity":"deprecated","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-path-chunk-name --save-dev` and ensure it's in node_modules.","cause":"Plugin not installed or Babel cannot resolve it.","error":"Cannot find module 'babel-plugin-path-chunk-name'"},{"fix":"Use require() or string name in Babel config; avoid ESM imports for config.","cause":"Using import statement in .babelrc (ESM) while plugin is CJS.","error":"ReferenceError: require is not defined"},{"fix":"Use nesting array: `[[\"path-chunk-name\", { opts }]]`.","cause":"Options passed as second argument to string plugin name without array wrapper.","error":"Invalid plugin configuration: must be an array or string"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}