import/dynamic-import-chunkname

webpack puts the target of each import() in its own file. Without a webpackChunkName comment, a production build names that file with a number, such as 472.js, which tells you nothing in a network tab or a bundle report.

The comment goes inside the parentheses, before the path. It must be a block comment with one space after /* and one before */. An import with webpackMode: "eager" doesn't make a chunk, so it doesn't need a name, and giving it one is reported too.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"import/dynamic-import-chunkname" = "error" # or "warn"

Every option, set to its default. The ones that are commented out are unset by default.

bunfig.toml

[lint.rules]
"import/dynamic-import-chunkname" = ["error", {
  importFunctions = [], # list of strings
  allowEmpty = false,
  # webpackChunknameFormat = <string>,
}]

Examples#

example.js1 problem

const settings = await import("./pages/settings.js");

example.js1 problem

const settings = await import(
  // webpackChunkName: "settings"
  "./pages/settings.js"
);

example.js1 problem

const settings = await import(/*webpackChunkName: "settings"*/ "./pages/settings.js");

example.js1 problem

const settings = await import(
  /* webpackChunkName: "settings", webpackMode: "eager" */
  "./pages/settings.js"
);

example.jsNo problems

const settings = await import(/* webpackChunkName: "settings" */ "./pages/settings.js");

const admin = await import(
  /* webpackChunkName: "admin", webpackPrefetch: true */
  "./pages/admin.js"
);

const icons = await import(/* webpackMode: "eager" */ "./icons.js");

Options#

Option	Default	What it does
`importFunctions`	`[]`	Names of functions that are checked like `import()`.
`allowEmpty`	`false`	Allow an import without a chunk name. A malformed comment is still reported.
`webpackChunknameFormat`	`"([0-9a-zA-Z-_/.]\|\[(request\|index)\])+"`	A regular expression that the chunk name must match.

example.jswith { "importFunctions": ["lazyLoad"] }1 problem

const settings = lazyLoad("./pages/settings.js");

example.jswith { "allowEmpty": true }No problems

const settings = await import("./pages/settings.js");

example.jswith { "allowEmpty": true }1 problem

const settings = await import(/*webpackPrefetch: true*/ "./pages/settings.js");

example.jswith { "webpackChunknameFormat": "page-[a-z]+" }1 problem

const settings = await import(/* webpackChunkName: "settings" */ "./pages/settings.js");

example.jswith { "webpackChunknameFormat": "page-[a-z]+" }No problems

const settings = await import(/* webpackChunkName: "page-settings" */ "./pages/settings.js");

When not to use it#

The comment only matters to webpack and to bundlers that read webpack's comments. If you bundle with bun build, leave this rule off.