I had a webpack warning in my nextjs dev server saying

Critical dep: the request of a dependency is an expression

This was because I imported some modules using variables, but the warning got away when i used template strings instead.

Original code that caused the warning to appear (using variables):

const filePath = path.join(__dirname, file)
const module = require(filePath)

I understand the reason for this warning: webpack can't statically analyze and so unnecessarily bundles all possible modules. To get rid of the warning I tried using template strings:

const filePath = path.join(__dirname, file)
const module = require(`${filePath}`)

and this made the error go away but I am confused why. Webpack still doesn't know the filePath at build time as it is still dynamic, how does using template literals in place of just variables makes a difference. Won't webpack include the corresponding module in the final bundle and expect it to available at runtime?

0

There are 0 best solutions below