[EuiIcon] NextJS Critical dependency: the request of a dependency is an expression

[bkniffler]

I'm getting memory leaks and crashes after a while with nextjs. This might or might not have anything to do with those crashes, but its the only issue I can see in my console appearing.

warn  - ../node_modules/@elastic/eui/lib/components/icon/icon.js
Critical dependency: the request of a dependency is an expression

Might this have anything to do with the following?

// @ts-ignore not generating typescript files or definitions for the generated JS components
// because we'd need to dynamically know if we're importing the
// TS file (dev/docs) or the JS file (distributed), and it's more effort than worth
// to generate & git track a TS module definition for each icon component
import { icon as empty } from './assets/empty.js';

Any ideas?

[miukimiu]

Hi @bkniffler,

The EuiIcon's are dynamically imported on-demand and I think it's causing this issue. You can take a look at appendIconComponentCache method which can be used to pre-load specific icons and avoid dynamic fetching. See consuming.md for more details.

We also have a NextJS starter which you can use or at least you can take a look at.

Let me know if any of these solutions helped you.

cc @chandlerprall

[bkniffler]

Hey @miukimiu, thanks for the hint! Indeed, it looks like appendIconComponentCache solves my issue, so I guess this can be closed. I'm already using the nextJS starter btw, maybe you could add the appendIconComponentCache to it (with comments that its not a necessity).