Realm导入报错：Package path '.'未从node_modules/realm导出求助

核心原因 #

Realm客户端SDK针对浏览器/移动端环境设计，Next.js 14的App Router默认使用服务端组件，服务端环境不兼容Realm的浏览器依赖；同时Next.js的模块解析规则可能无法识别Realm的导出配置，需要额外配置转译。

具体解决方案 #

1. 区分客户端/服务端代码 #

• 客户端组件：所有使用Realm的文件必须添加'use client'指令，确保代码在浏览器环境执行（Realm依赖window对象）。
• 服务端组件/API路由：不要使用Realm客户端SDK，改用MongoDB官方Node.js驱动直接连接Atlas数据库——服务端环境不支持Realm的客户端运行时。

2. 配置Next.js转译Realm包 #

在next.config.js中添加transpilePackages，强制Next.js转译Realm及其相关包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['realm', '@realm/react'],
}

module.exports = nextConfig

3. 正确的客户端导入方式 #

直接使用Realm SDK

在客户端组件的db.ts中：

'use client';

import Realm from 'realm';
// 或解构导入
import { Realm } from 'realm';

// 初始化Realm实例
const realm = await Realm.open({
  schema: [], // 替换为你的数据模型
  sync: {
    user: await Realm.Sync.User.login(<你的登录配置>),
    partitionValue: <你的分区键>,
  },
});

使用@realm/react（推荐）

通过RealmProvider管理实例，避免手动初始化：

'use client';

import { RealmProvider, useRealm } from '@realm/react';

// 封装Provider组件
export function AppRealmProvider({ children }: { children: React.ReactNode }) {
  return (
    <RealmProvider
      appId="<你的Realm App ID>"
      partitionValue="<你的分区键>"
    >
      {children}
    </RealmProvider>
  );
}

// 在业务组件中使用
export function TodoList() {
  const realm = useRealm();
  // 操作Realm数据库
  return <div>...</div>;
}

4. 清理依赖缓存 #

执行以下命令重置依赖，避免缓存导致的导出识别问题：

pnpm cache clean
rm -rf node_modules pnpm-lock.yaml
pnpm install

5. 验证Realm包导出 #

确认node_modules/realm/package.json的exports字段包含以下配置（Realm 12.9.0默认已包含）：

"exports": {
  ".": {
    "react-native": "./lib/index.js",
    "node": "./lib/index.js",
    "browser": "./lib/browser/index.js",
    "default": "./lib/index.js"
  }
}

内容的提问来源于stack exchange，提问作者Kiran K.