React引入cassandra-driver触发webpack polyfill报错如何解决

你遇到的问题本质不是webpack配置的问题，是包的运行环境搞混了：
cassandra-driver 是纯Node.js服务端侧的数据库驱动，从设计上就不支持浏览器运行环境。哪怕你把webpack所有Node核心模块的polyfill全补全，也会因为浏览器没有原生TCP连接能力、数据库鉴权信息完全暴露在前端代码里等问题无法正常使用，还会带来严重的数据安全隐患。
你找不到webpack配置文件的原因也很简单：如果你是用create-react-app官方脚手架创建的项目，webpack配置默认被封装在react-scripts依赖内部，不会直接暴露在项目根目录，你在node_modules里翻到的所有webpack相关文件都是依赖内部的文件，直接修改的话只要执行npm install或者升级依赖就会全部失效。

如果你只是本地做技术验证，非要在前端代码里尝试引入，可以按以下步骤操作：

1. 先安装缺失的浏览器端polyfill依赖

npm install stream-browserify crypto-browserify buffer util os-browserify path-browserify

2. 如果你用CRA脚手架，执行npm run eject不可逆弹出内置配置（新手不推荐，弹出后配置维护成本极高），之后在项目根目录生成的webpack.config.js里找到resolve.fallback配置段，添加如下映射：

resolve: {
  // 其他原有配置保留
  fallback: {
    stream: require.resolve('stream-browserify'),
    crypto: require.resolve('crypto-browserify'),
    buffer: require.resolve('buffer/'),
    util: require.resolve('util/'),
    os: require.resolve('os-browserify/browser'),
    path: require.resolve('path-browserify'),
    fs: false,
    net: false,
    tls: false
  }
}

警告：该方案仅做本地调试用，前端直接连数据库会把数据库地址、账号、密码完全暴露给所有访问站点的用户，任何人都可以随意操作你的数据库，生产环境绝对禁止使用。

前后端分离架构下，前端永远不能直接连接数据库，标准接入流程如下：

• 搭建一层后端服务，新手可以直接用Express、Koa这类轻量Node.js框架，如果你用Next.js开发React项目可以直接用内置的API Routes功能，不需要额外部署服务
• 在后端服务侧安装cassandra-driver，这里是纯Node.js运行环境，不需要任何polyfill，按照官方文档写连接逻辑、封装业务需要的增删改查方法即可
• 后端接口做好参数校验、权限鉴权，只开放业务必需的操作，禁止直接暴露通用查询接口
• React前端代码里保留axios的使用逻辑，只请求你自己开发的后端接口，由后端负责和DataStax数据库通信，拿到结果后返回给前端
• 数据库连接地址、账号密码全部存在后端的环境变量中，完全不对外暴露，从根源上避免安全问题

如果不想自己写后端逻辑，也可以用DataStax Astra提供的官方HTTP API，但同样需要加一层后端代理做鉴权，不能把官方API的访问令牌直接写在前端代码里。

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