React中使用sqlite3报错求助：模块解析失败问题

为什么会报错？ #

sqlite3 是为 Node.js 环境开发的数据库库，依赖 Node.js 系统 API 和二进制编译模块，不能直接在浏览器端的 React 应用中使用。你遇到的报错是因为 Webpack 试图打包浏览器无法识别的 Node.js 端资源（比如那个 index.html 文件），但没有对应的 loader 处理。

解决方案分两种场景： #

场景1：在浏览器端读取用户本地的 SQLite 文件 #

改用浏览器兼容的 SQLite 实现，比如 sql.js（基于 WebAssembly 编译的 SQLite）：

1. 安装依赖

npm install sql.js

2. React 组件使用示例（通过文件上传读取本地 SQLite 文件）

import React, { useRef } from 'react';
import initSqlJs from 'sql.js';

export default function SqliteReader() {
  const fileInputRef = useRef(null);

  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 初始化 sql.js
    const SQL = await initSqlJs({
      locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/${file}`
    });

    // 读取文件为 ArrayBuffer
    const arrayBuffer = await file.arrayBuffer();
    const db = new SQL.Database(new Uint8Array(arrayBuffer));

    // 执行查询示例
    const result = db.exec("SELECT * FROM your_table_name");
    console.log('查询结果:', result);

    // 关闭数据库
    db.close();
  };

  return (
    <div>
      <input
        type="file"
        accept=".sqlite,.sqlite3"
        onChange={handleFileUpload}
        ref={fileInputRef}
      />
    </div>
  );
}

场景2：通过 Node.js 后端操作 SQLite，前端调用 API #

如果 SQLite 文件是服务器端存储的，把 sqlite3 放在 Node.js 后端代码中，前端通过接口获取数据：

1. Node.js 后端（Express 示例）

// server.js
const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const app = express();

// 连接数据库
const db = new sqlite3.Database('./your-local-db.sqlite3', (err) => {
  if (err) console.error('数据库连接失败:', err);
});

// 定义数据接口
app.get('/api/data', (req, res) => {
  db.all('SELECT * FROM your_table_name', (err, rows) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    res.json(rows);
  });
});

app.listen(3001, () => console.log('后端服务运行在 http://localhost:3001'));

2. React 前端调用接口示例

import React, { useEffect, useState } from 'react';

export default function DataFetcher() {
  const [data, setData] = useState([]);

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

  return (
    <div>
      <h3>数据库数据</h3>
      <ul>
        {data.map(item => (
          <li key={item.id}>{JSON.stringify(item)}</li>
        ))}
      </ul>
    </div>
  );
}

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