Webpack打包Can't resolve 'fs'/'mjml'报错 排查方案咨询

两个报错属于独立问题，分别处理即可：

1. 修复Can't resolve 'mjml'报错 #

这个报错和webpack配置无关，是漏装了核心依赖：mjml-react只是React组件语法层的封装，实际渲染逻辑全在mjml主包里，只装封装层没装主包自然会报找不到模块。
直接执行安装命令补全依赖即可，注意大版本要和现有mjml-react匹配，目前主流mjml-react版本对应mjml 4.x系列：

npm i mjml@4 -S

2. 修复Can't resolve 'fs'等node原生模块报错 #

你之前尝试的配置不生效有三个原因：

• 配置的mock模块不全，只写了fs，没覆盖path、os、child_process等其他node原生模块
• webpack配置里resolve.alias把inferno映射为空字符串是错误配置，会干扰整个模块解析流程，直接导致后续polyfill配置失效
• webpack4在web构建目标下不会自动注入node原生模块的polyfill，clean-css、uglify-js都是node环境运行的依赖，被打包进浏览器端bundle时必然找不到原生模块

按如下步骤修改配置：

1. 先删掉webpack配置里错误的inferno别名段：

// 删掉以下错误配置
resolve: {
  alias: {
    'inferno': ''
  }
},

2. 在webpack配置顶层补全完整的node模块mock配置，不要只写fs：

const config = merge.smart(common.config, {
  mode: "development",
  devtool: "inline-source-map",
  // 新增以下node配置
  node: {
    fs: 'empty',
    path: 'empty',
    os: 'empty',
    module: 'empty',
    net: 'empty',
    tls: 'empty',
    dns: 'empty',
    child_process: 'empty'
  },
  output: {
    filename: "js/[name].js",
    chunkFilename: "js/[name].chunk.js"
  },
  // 原有的devServer等其余配置保持不变即可
  devServer: {
    // 原有配置不动
  }
})

之前尝试在package.json里加的browser字段配置不需要保留，只要webpack里的node配置正确就可以覆盖这类场景；如果要加browser字段必须放在package.json顶层，不能嵌在dependencies或其他配置段里，否则不会生效。

3. 最终验证 #

改完配置后不要直接触发热更新，先做这几步清缓存：

• 删除项目根目录下的dist打包产物文件夹
• 删除node_modules下的.cache缓存目录
• 完全重启webpack-dev-server进程

如果重启后仍有同类报错，检查业务代码里是否直接引入了mjml的node端专属入口，如果mjml渲染逻辑是在服务端执行的，不要把这部分代码打进前端browser bundle，拆分到node服务层即可，强行把node侧渲染依赖打进前端包会大幅增加产物体积，还可能引发其他运行时兼容问题。

内容的提问来源于stack exchange，提问作者Arun M