dynamic-import-chunkname

💼 This rule is enabled in the following configs: recommended, typescript. 💡 This rule is manually fixable by editor suggestions.

Rule DetailsCopy Anchor Link

webpack names the chunk a dynamic import() creates after the /* webpackChunkName: "name" */ comment inside the call. Without one the chunk gets a numeric id, which makes bundles hard to read and cache keys unstable. This rule is a convention for webpack projects: every dynamic import carries a chunk name, written as a comment inside the call before the module argument, and the name matches webpackChunknameFormat.

• A dynamic import is import(), and a call to any function listed in importFunctions. Other calls are not imports.
• The default format accepts webpack's name characters (0-9 a-z A-Z - _ / .) and its [request] and [index] placeholders, so /* webpackChunkName: "[request]" */ is valid.
• /* webpackMode: "eager" */ keeps the module in the parent chunk: there is no chunk to name, so no name is required.

❌ IncorrectCopy Anchor Link

import('./pages/home');
import(/* webpackChunkName: "home page!" */ './pages/home');

✅ CorrectCopy Anchor Link

import(/* webpackChunkName: "home" */ './pages/home');
import(/* webpackChunkName: "[request]" */ `./locale/${lang}`);
import(/* webpackMode: "eager" */ './pages/home');

OptionsCopy Anchor Link

[
  {
    "type": "object",
    "properties": {
      "importFunctions": {
        "type": "array",
        "items": {
          "type": "string"
        }
      },
      "allowEmpty": {
        "type": "boolean",
        "default": false
      },
      "webpackChunknameFormat": {
        "type": "string"
      }
    },
    "additionalProperties": false
  }
]

• importFunctions (default []): names of functions that wrap import() and take the module as their first argument, e.g. ["dynamicImport"]. Their calls are checked like import().
• allowEmpty (default false): accept a dynamic import with no chunk name comment. A comment that names a chunk is still checked against the format.
• webpackChunknameFormat (default ([0-9a-zA-Z-_/.]|\[(request|index)\])+): the regular expression a chunk name must match in full. Setting it replaces the default, placeholders included.

When Not To Use ItCopy Anchor Link

When you do not bundle with webpack, or you are fine with numeric chunk ids.

Use this rule

npm install -D oxlint-plugin-import-next

{  "jsPlugins": ["oxlint-plugin-import-next"],  "rules": {    "import-next/dynamic-import-chunkname": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-import-next'],    rules: {      'import-next/dynamic-import-chunkname': 'error',    },  },});