sql.js客户端配置报错：Uncaught ReferenceError: require is not defined

问题原因 #

require()是Node.js专属的CommonJS模块语法，浏览器原生ES模块（即type="module"的script标签）不支持该语法，你用的是客户端原生JS，和Node.js的模块机制不兼容，这就是报错的根源。

修复方案 #

把require()替换成浏览器支持的ES模块import语法，直接从CDN导入sql.js的ES模块版本，修改后的代码如下：

<script type="module">
  // 用ES模块导入替代Node.js的require
  import initSqlJs from 'https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js';

  const SQL = await initSqlJs({
    // 自动匹配wasm文件路径，确保能加载到配套的sql-wasm.wasm
    locateFile: (file) => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/${file}`
  });
  const db = new SQL.Database();

  let sqlstr = `CREATE TABLE hello (a int, b char);
INSERT INTO hello VALUES (0, 'hello');
INSERT INTO hello VALUES (1, 'world');`;
  db.run(sqlstr);

  // 可选：添加查询验证，确认数据库操作成功
  const queryResult = db.exec("SELECT * FROM hello");
  console.log("查询结果：", queryResult);
</script>

额外说明 #

1. 如果你想使用本地npm install的sql.js包，不能直接在客户端引用，必须通过打包工具（比如Vite、Webpack）处理模块转换，把CommonJS格式的包转换成浏览器能识别的ES模块或全局变量。
2. 务必保证locateFile配置的路径正确，sql.js依赖对应的.wasm文件才能运行，CDN目录下的sql-wasm.js和sql-wasm.wasm是配套的，用${file}可以自动匹配文件名。

新手建议 #

• 首次尝试客户端数据库，优先用CDN的ES模块版本，避开本地包的模块兼容坑
• 测试代码时，添加查询并打印结果的步骤，能快速确认数据库操作是否生效

内容的提问来源于stack exchange，提问作者mr.sun