React报错‘ReferenceError: indexedDB is not defined’但功能正常

问题原因 #

indexedDB是浏览器专属API，仅在浏览器环境中存在。你的代码大概率在非浏览器环境（比如Node.js、SSR框架的服务端渲染阶段）执行了set('hello', 'world')，导致触发ReferenceError；而数据能成功存入是因为浏览器端的代码路径正常执行了存储操作，两个环境的执行是独立的。

解决方案 #

1. 限制代码仅在浏览器环境执行 #

通过判断全局对象（如window）是否存在，或者使用框架提供的浏览器端生命周期钩子，确保idb-keyval的方法只在浏览器中调用：

React示例

import { useEffect } from 'react';
import { set } from 'idb-keyval';

function YourComponent() {
  useEffect(() => {
    // useEffect仅在浏览器端渲染后执行
    set('hello', 'world');
  }, []);

  return <div>...</div>;
}

Vue示例

<script setup>
import { onMounted } from 'vue';
import { set } from 'idb-keyval';

onMounted(() => {
  // onMounted仅在浏览器端组件挂载后执行
  set('hello', 'world');
});
</script>

2. 动态导入idb-keyval（通用方案） #

如果没有框架生命周期可用，可通过动态导入限制仅在浏览器环境加载并调用：

if (typeof window !== 'undefined') {
  import('idb-keyval').then(({ set }) => {
    set('hello', 'world');
  });
}

3. 排查非浏览器执行路径 #

如果是纯Node.js环境出现该错误，说明你错误地在服务器端代码中调用了浏览器API，直接移除这段代码即可——indexedDB无法在Node环境中使用。

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