React应用中pg-connection-string与Sequelize连接报错求助

核心问题 #

你在React前端代码中直接使用Sequelize是错误的——Sequelize是专为Node.js后端设计的ORM工具，它依赖Node.js的核心模块（如fs），而浏览器环境并不支持这些模块，这就是你遇到Can't resolve 'fs'错误的根本原因。

另外，你配置的是MySQL dialect，但Sequelize的依赖链仍会引入pg相关包（包括pg-connection-string），这个包依赖fs，进一步触发了浏览器环境下的模块缺失错误。

解决方案 #

1. 架构调整：将数据库操作移至Node.js后端 #

Sequelize必须运行在Node.js环境中，你需要搭建一个简单的后端服务（比如用Express）来处理数据库逻辑：

• 新建一个Node.js项目，初始化后安装依赖：

  npm init -y
  npm install sequelize mysql2 express cors
  

• 将你现有的Sequelize代码移到后端项目中，编写API接口供前端调用，示例代码：

  // 后端server.js
  const express = require('express');
  const Sequelize = require('sequelize');
  const cors = require('cors');
  
  const app = express();
  app.use(cors());
  app.use(express.json());
  
  // 初始化Sequelize连接
  const sequelize = new Sequelize('texteditor', 'root', '', {
    host: 'localhost',
    dialect: 'mysql'
  });
  
  // 定义模型
  const Database = sequelize.define('database', {
    title: { type: Sequelize.STRING },
    content: { type: Sequelize.TEXT }
  });
  
  // 测试连接并同步模型
  sequelize.authenticate()
    .then(() => {
      console.log('数据库连接成功');
      return sequelize.sync();
    })
    .catch(err => console.error('连接失败:', err));
  
  // 编写API接口
  app.get('/api/data', async (req, res) => {
    const data = await Database.findAll();
    res.json(data);
  });
  
  app.post('/api/data', async (req, res) => {
    const newData = await Database.create(req.body);
    res.json(newData);
  });
  
  app.listen(3001, () => console.log('后端服务运行在http://localhost:3001'));
  

2. 前端修改：通过API与后端交互 #

React前端不再直接引入Sequelize，而是通过fetch或axios调用后端API，示例：

// React组件示例
import { useEffect, useState } from 'react';

function App() {
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    // 获取数据
    fetch('http://localhost:3001/api/data')
      .then(res => res.json())
      .then(data => setDataList(data))
      .catch(err => console.error('获取数据失败:', err));
  }, []);

  const saveData = async () => {
    // 提交数据
    await fetch('http://localhost:3001/api/data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: '测试标题', content: '测试内容' })
    });
  };

  return (
    <div>
      <button onClick={saveData}>保存数据</button>
      {dataList.map(item => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

3. 清理不必要的依赖 #

你使用的是MySQL dialect，完全不需要pg-connection-string包，可在前端项目中卸载它：

npm uninstall pg-connection-string

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