import-js/eslint-plugin-import

[dynamic-import-chunkname] webpackChunkName should be optional when webpackMode: "eager"

Open

#1,904 opened on Sep 18, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (1,540 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (4,946 stars)
PR merge metrics
 (Avg merge 138d 22h) (3 merged PRs in 30d)

Description

Code

import(
  /* webpackMode: "eager" */ '../a-module-that-requires-some-time-to-initialize'
)

Expected result

(No warning)

Actual result

dynamic imports require a leading comment in the form /* webpackChunkName: "[a-zA-Z0-9-/_]+",? */ eslint(import/dynamic-import-chunkname)

Description

From the docs:

'eager': Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A Promise is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to import() is made.

/* webpackMode: "eager" */ is handy when you want to include a module in the same chunk, but do not want to execute it when the chunk is initially loaded.

Workaround

// See https://github.com/benmosher/eslint-plugin-import/issues/1904
// eslint-disable-next-line import/dynamic-import-chunkname
import(
  /* webpackMode: "eager" */ '../a-module-that-requires-some-time-to-initialize'
)

Contributor guide