I get a webpack warning Critical dependency: the request of a dependency is an expression when use koa

Question

When I start webpack for bundling my react application using koa with server side rendering I get a warning

WARNING in /app/node_modules/any-promise/register.js 24:14-37
[1] Critical dependency: the request of a dependency is an expression
[1]  @ /app/node_modules/any-promise/index.js
[1]  @ /app/node_modules/koa-compose/index.js
[1]  @ /app/node_modules/koa-convert/index.js
[1]  @ /app/node_modules/koa/lib/application.js
[1]  @ ./server/index.ts

Should I worry?

Marlenamarlene

Answer 1

Well, I answered this question a few hours ago in any-promise Github repository.

So I just copy the answer here:

It happened because register.js has a dynamic import on 24 lines:

var lib = require(implementation)

It means webpack can't resolve the require statically and imports entire package

You can read this part of webpack docs: https://webpack.js.org/guides/dependency-management/#require-with-expression

It can be solved using ContextReplacementPlugin, for example, you can add "fake" config in your webpack to suppress this warning

plugins: [
    new ContextReplacementPlugin(/any-promise/)
]

And I think you don't have to worry because webpack requires "unnecessary" packages only into your server app.

You also can keep track of this issue: https://github.com/kevinbeaty/any-promise/issues/31

Nonappearance

And ContextReplacementPlugin will remove unnecessary packages from my bundle? – Marlenamarlene

@Antony ContextReplacementPlugin can remove it, but my example just suppress this warning – Nonappearance