Nuxt项目导入Express遇编译警告及async_hooks模块缺失问题求助

问题概述 #

在Nuxt 2项目中尝试导入Express开发登录页面时，编译出现5条警告：包括./node_modules/express/lib/view.js的依赖请求为表达式严重警告，以及on-finished、raw-body等多个模块无法解析async_hooks的错误。已正确导入dotenv，但Express仍无法正常工作，尝试指定../node_modules/express路径导入也无效。

报错详情 #

WARN  Compiled with 5 warnings                                                                                                                 friendly-errors 09:56:47


 WARN  in ./node_modules/express/lib/view.js                                                                                                    friendly-errors 09:56:47

Critical dependency: the request of a dependency is an expression                                                                               friendly-errors 09:56:47
                                                                                                                                                friendly-errors 09:56:47

 WARN  in ./node_modules/body-parser/node_modules/on-finished/index.js                                                                          friendly-errors 09:56:47

Module not found: Error: Can't resolve 'async_hooks' in '/home/joao/Documentos/projetos/metaseed/node_modules/body-parser/node_modules/on-finished'
                                                                                                                                                friendly-errors 09:56:47

 WARN  in ./node_modules/express/node_modules/on-finished/index.js                                                                              friendly-errors 09:56:47

Module not found: Error: Can't resolve 'async_hooks' in '/home/joao/Documentos/projetos/metaseed/node_modules/express/node_modules/on-finished' friendly-errors 09:56:47
                                                                                                                                                friendly-errors 09:56:47

 WARN  in ./node_modules/raw-body/index.js                                                                                                      friendly-errors 09:56:47

Module not found: Error: Can't resolve 'async_hooks' in '/home/joao/Documentos/projetos/metaseed/node_modules/raw-body'                         friendly-errors 09:56:47
                                                                                                                                                friendly-errors 09:56:47

 WARN  in ./node_modules/send/node_modules/on-finished/index.js                                                                                 friendly-errors 09:56:47

Module not found: Error: Can't resolve 'async_hooks' in '/home/joao/Documentos/projetos/metaseed/node_modules/send/node_modules/on-finished' 

当前代码 #

export default () => {
  require('../node_modules/dotenv').config()
  const express = require('express')

  const app = express()
}

依赖配置 #

"dependencies": {
  "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
  "@nuxtjs/axios": "^5.13.6",
  "bootstrap": "^4.6.2",
  "bootstrap-vue": "^2.22.0",
  "core-js": "^3.25.3",
  "fs": "^0.0.1-security",
  "net": "^1.0.2",
  "nuxt": "^2.15.8",
  "require": "^2.4.20",
  "vue": "^2.7.10",
  "vue-server-renderer": "^2.7.10",
  "vue-template-compiler": "^2.7.10"
},
"devDependencies": {
  "@vue/test-utils": "^1.3.0",
  "babel-core": "7.0.0-bridge.0",
  "babel-jest": "^29.1.2",
  "bcrypt": "^5.1.0",
  "dotenv": "^16.0.3",
  "express": "^4.18.2",
  "jest": "^29.1.2",
  "jest-environment-jsdom": "^29.1.2",
  "jsonwebtoken": "^8.5.1",
  "mongoose": "^6.7.2",
  "nodemon": "^2.0.20",
  "vue-jest": "^3.0.4"
}

解决方案 #

核心问题原因 #

Express是Node.js后端框架，不能直接在Nuxt的前端/通用代码中导入打包：

• webpack打包前端代码时会尝试解析所有依赖，但async_hooks是Node.js核心模块，浏览器环境不存在，导致模块找不到错误；
• express/lib/view.js中的动态require（依赖请求为表达式）无法被webpack静态分析，触发Critical dependency警告。

正确集成方式 #

1. 移除前端代码中的Express导入
   删除页面/组件里的require('express')代码，这部分逻辑应该放在Nuxt的服务器端中间件中。

2. 创建Express服务器中间件
   在项目根目录新建server/index.js，编写Express逻辑：

   require('dotenv').config()
   const express = require('express')
   const app = express()
   
   // 配置express中间件，比如解析JSON
   app.use(express.json())
   
   // 编写登录接口示例
   app.post('/api/login', (req, res) => {
     const { username, password } = req.body
     // 这里添加实际的登录验证逻辑（比如查询数据库）
     if (username === 'test' && password === '123456') {
       res.status(200).json({ success: true, token: 'fake-token' })
     } else {
       res.status(401).json({ success: false, message: '账号或密码错误' })
     }
   })
   
   module.exports = app
   

3. 配置Nuxt的serverMiddleware
   在nuxt.config.js中添加服务器中间件配置，让Nuxt加载你的Express服务：

   export default {
     // 其他配置...
     serverMiddleware: [
       './server/index.js'
     ]
   }
   

4. 调整依赖位置
   将express和dotenv从devDependencies移到dependencies，因为生产环境需要这些依赖：

   "dependencies": {
     // 原有依赖...
     "dotenv": "^16.0.3",
     "express": "^4.18.2"
   },
   "devDependencies": {
     // 移除devDependencies中的express和dotenv
   }
   

5. 重启项目
   运行npm run dev重启Nuxt，此时Express服务会作为Nuxt服务器的中间件运行，所有请求会先经过你的Express路由处理，不会再出现之前的编译警告。

内容的提问来源于stack exchange，提问作者João Denari