React服务端渲染报错：no such file or directory，疑为memory-fs异常

我之前在搭建React SSR项目时也踩过一模一样的memory-fs文件找不到的坑，给你整理几个实用的排查和解决方向，应该能帮你搞定：

1. 把webpack配置里的路径全改成绝对路径 #

memory-fs对相对路径的解析特别容易出问题，尤其是服务端构建配置里，一定要确保output.path、entry以及loader相关的路径都是绝对路径。举个例子：

// 错误的相对路径写法
output: {
  path: './dist/server',
  filename: 'server.bundle.js'
}

// 正确的绝对路径写法
const path = require('path');
output: {
  path: path.resolve(__dirname, './dist/server'),
  filename: 'server.bundle.js'
}

另外，服务端入口文件的引用也尽量用绝对路径，避免不同环境下路径解析出现偏差。

2. 确认目标文件/目录真的存在，且路径拼写无错 #

有时候问题很简单，就是我们自己拼写错了路径（比如Linux系统下路径区分大小写，不小心把Server写成server），或者构建脚本提前清空了目标目录但没重新生成文件。可以在报错的位置加一段调试代码，打印memory-fs里的目录结构，看看实际内存里有没有你要找的文件：

const mfs = new MemoryFileSystem();
// 替换成你自己的目标路径
console.log(mfs.readdirSync(path.resolve(__dirname, './dist/server')));

如果输出里没有你需要的文件，那说明webpack构建根本没生成对应的文件，得先排查构建流程是否正常。

3. 排查服务端webpack的插件和loader配置 #

有些插件（比如CleanWebpackPlugin）如果配置不当，会在构建前清空内存目录，把需要的文件也删掉。另外，服务端构建不需要style-loader这类浏览器端的loader，要换成css-loader/locals或者直接忽略样式文件，否则可能导致构建失败，memory-fs里自然就没有bundle文件：

// 服务端webpack配置中的样式处理示例
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['css-loader/locals']
    }
  ]
}

4. 确保SSR渲染时的文件读取路径和webpack输出路径完全一致 #

当你在服务端用memory-fs读取bundle文件时，读取路径必须和webpack配置的output.path完全匹配，不能偷懒用相对路径：

// 错误写法
const bundle = mfs.readFileSync('./dist/server/server.bundle.js', 'utf-8');

// 正确写法
const bundle = mfs.readFileSync(path.resolve(__dirname, './dist/server/server.bundle.js'), 'utf-8');

5. 升级相关依赖版本 #

老版本的memory-fs、webpack或者react-dom/server可能存在路径解析的bug，尝试升级到最新稳定版试试：

npm update memory-fs webpack react-dom

补充：如果以上步骤都没解决问题，建议把你的webpack服务端配置、SSR渲染核心代码贴出来，这样能更精准定位问题，但先按上面的步骤排查，大部分这类问题都是路径配置或者构建流程的小疏漏导致的。

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