webpack打包express，警告dependency is an expression

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

首先声明，这是个警告信息，不是个报错信息，一般发生在使用webpack进行打包的时候。信息内容是：the request of a dependency is an expression。因为信息的warning性质。所以，解决方案可以是“不处理不解决，假装没看到”。详细内容请参考文章。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1，express@4.21.1，webpack-cli@5.1.4。

前置阅读

其实本文所描述的警告信息，依然发生在调试React SSR过程中，使用webpack对基于express的server.jsx进行打包的时候，如果打包失败，各种报错的话，注意设置webpack.config.js的target为node。参考：

• https://newsn.net/say/webpack-react-render.html、

如果打包成功，没有把express排除出打包范围的话，就会出现如下警告信息：

WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/express/lib/application.js 22:11-28
 @ ./node_modules/express/lib/express.js 18:12-36
 @ ./node_modules/express/index.js 11:0-41
 @ ./server.jsx 1:0-30 9:13-20 10:9-23

解决方案一【推荐】

正常来说，对应的代码位置，一定是require()或者import()了一个变量或者表达式。这在node程序里面，这是正常的语法，可以正常执行。

但是对于webpack来说，因为它并不执行对应的程序，只是从字面上去理解代码，找到需要打包出来的代码。所以，它无法解决这种动态引入的情况。因此，报错：Critical dependency: the request of a dependency is an expression。

而需要修改对应代码的写法，使得这里不是变量而是字符串。但是，这里除非自己的代码，这里修改express的代码，似乎有些不合适。而且，这也并不是个bug。只是基于webpack的角度，无法理解这个代码罢了。

所以，不理会这个warning，也可以算作一个解决方案。

注意：这个时候，express被打包进去最终的成品代码了。也就是说express被webpack接管，然后出现了webpack无法理解的语法。（因为webpack是静态分析代码的，并不会执行它）

解决方案二【也许推荐】

因为报错信息，出自express的正常代码。除了不理会warning（保持express的被打包状态），也可以把express排除出去打包的范围。虽然这很掩耳盗铃，但是在一定情形下，也是个解决方案。治标不治本的去除掉这个warning。

比如，配置webpack.config.js：

externals: [
  'express'
],

或者

externals: {
  'express':'commonjs express',
},

或者

const nodeExternals = require('webpack-node-externals');
//...
module.exports = {
  //...
  externals: [
    nodeExternals()
  ],
  //...
}

无论那种写法，在最终运行的时候，都还需要再次安装express。因为express并没有被打包进去。

npm i express

注意：本方案中，express并没有被打包进去最终的成品代码，也就是说express并没有被webpack所接管。

解决方案三（待议）

请各位读者看清楚，本文说的是这个dependency is an expression警告信息的来源是express。它是个无法修改的第三方包，所以，才会有上述解决两个“掩耳盗铃版”的方案。

如果对应警告信息来自于你自己的代码，最好的办法是修改它。修改方案就以后具体情况具体分析了。

结束语

更多苏南大叔的webpack相关经验文章，请参考：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。