React项目无法部署至Firebase Hosting，报错require(...).internalModuleStat不是函数

核心原因 #

sql.js依赖Node.js核心模块（如fs），但Firebase Hosting是纯前端浏览器环境，不支持这些Node.js专属API；同时webpack打包时若未正确处理模块替换，会导致部署后出现模块加载错误。

具体解决步骤 #

1. 改用sql.js的浏览器兼容版本 #

不要直接引入Node.js版本的sql.js，在代码中切换为浏览器适配的构建版本：

// 替换原引入方式
import initSqlJs from 'sql.js/dist/sql-wasm.js';

同时将node_modules/sql.js/dist/sql-wasm.wasm复制到项目的public目录下，确保构建后该文件能被访问到。

2. 配置webpack处理Node.js模块替换（针对react-scripts项目） #

如果使用react-scripts且未执行eject，借助react-app-rewired修改webpack配置：

• 安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 在项目根目录创建config-overrides.js文件，添加以下配置：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 用sql.js的浏览器版本替换fs模块，禁用不需要的Node.js模块
  addWebpackAlias({
    'fs': path.resolve(__dirname, 'node_modules/sql.js/dist/sql-wasm.js'),
    'path': false,
    'crypto': false
  })
);

• 修改package.json中的scripts命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

3. 配置Firebase Hosting适配Wasm文件 #

在firebase.json的hosting配置中添加Wasm文件的MIME类型头，确保浏览器能正确解析：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.wasm",
        "headers": [{"key": "Content-Type", "value": "application/wasm"}]
      }
    ]
  }
}

4. 清理缓存后重新构建部署 #

# 删除旧依赖和缓存
rm -rf node_modules package-lock.json
npm install

# 重新构建
npm run build

# 重新部署到Firebase
firebase deploy --only hosting

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