NextJS中使用sql.js报TypeError: Cannot set properties of undefined错误

问题根源 #

sql.js默认分发版本为浏览器环境设计，依赖浏览器模块系统，而Next.js Server Actions运行在Node.js环境中，直接导入会触发模块系统冲突，导致Cannot set properties of undefined (setting 'exports')错误。

解决方向 #

1. 使用sql.js的Node.js专用导入路径 #

sql.js提供了Node.js环境的入口，导入该路径可避免模块冲突：

'use server';

// 导入Node.js版本的sql.js
import initSqlJs from 'sql.js/dist/sql-wasm.node.js';
import path from 'path';
import { fileURLToPath } from 'url';

export const initDb = async () => {
  try {
    // Node.js环境下需指定Wasm文件路径
    const __dirname = path.dirname(fileURLToPath(import.meta.url));
    const SQL = await initSqlJs({
      locateFile: filename => path.join(__dirname, 'node_modules/sql.js/dist', filename)
    });
    const db = new SQL.Database();
    console.log('数据库初始化成功:', db);
    // 返回状态给客户端
    return { success: true, message: '数据库初始化完成' };
  } catch (error) {
    console.error('数据库初始化失败:', error);
    return { success: false, error: error.message };
  }
};

2. 调整客户端调用逻辑 #

客户端调用Server Action时，建议用async/await处理异步逻辑，确保正确接收返回值：

// 客户端组件中
import { initDb } from '@/app/actions';

async function handleInitDb() {
  const result = await initDb();
  console.log('Server Action返回结果:', result);
}

// 组件内触发调用示例
<button onClick={handleInitDb}>初始化数据库</button>

3. 验证Wasm文件路径 #

若仍出现Wasm加载问题，检查node_modules/sql.js/dist目录下是否存在sql-wasm.wasm文件，调整locateFile的返回路径确保指向正确位置。

4. 备选方案：改用原生Node.js SQL库 #

如果sql.js的Node.js适配仍有问题，可替换为原生支持Node.js的库，比如better-sqlite3：

'use server';

import Database from 'better-sqlite3';

export const initDb = () => {
  try {
    const db = new Database(':memory:'); // 内存数据库，也可指定本地文件路径
    console.log('数据库初始化成功:', db);
    return { success: true };
  } catch (error) {
    console.error('初始化失败:', error);
    return { success: false, error: error.message };
  }
};

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