Sonner库在Monorepo环境中的使用问题解析

问题背景

Sonner是一个流行的React通知/提示组件库。在实际开发中，特别是在Monorepo架构的项目中，开发者可能会遇到Sonner无法正常工作的情况。具体表现为：在本地开发环境下Toast提示功能正常，但在生产环境或通过NPM发布的包中调用时失效。

问题本质

这个问题的核心在于Sonner库的实例管理机制。当在Monorepo中跨包使用时，如果主应用和UI库中都安装了Sonner，即使版本相同，也可能因为模块解析机制导致实际上使用了不同的实例。

技术原理分析

1. 模块解析机制：在Node.js模块系统中，即使两个包中安装的库版本相同，如果它们位于不同的node_modules目录下，也会被视为不同的实例。

2. 单例模式失效：Sonner内部可能依赖单例模式来管理全局状态，但在Monorepo中，由于模块解析机制，单例模式可能失效。

3. React上下文隔离：当Toaster组件和toast函数来自不同的实例时，React的上下文无法正确传递，导致调用toast函数时找不到对应的Toaster组件。

解决方案

方案一：统一实例来源

确保整个应用中只使用一个Sonner实例。可以通过以下方式实现：

1. 只在Monorepo的根项目中安装Sonner
2. 通过peerDependencies确保所有子包使用同一个Sonner实例
3. 在根项目中渲染Toaster组件

方案二：显式传递实例

如果必须在子包中使用Sonner，可以通过props显式传递toast函数：

// 在父组件中
import { toast } from 'sonner';

function ParentComponent() {
  return (
    <>
      <Toaster />
      <ChildComponent toast={toast} />
    </>
  );
}

// 在子组件中
function ChildComponent({ toast }) {
  const handleClick = () => {
    toast.success('操作成功');
  };
  
  return <button onClick={handleClick}>点击我</button>;
}

方案三：使用上下文共享

创建一个全局上下文来共享toast函数：

// toast-context.js
import { createContext } from 'react';
import { toast } from 'sonner';

export const ToastContext = createContext(toast);

// App.js
import { ToastContext } from './toast-context';

function App() {
  return (
    <ToastContext.Provider value={toast}>
      <Toaster />
      {/* 其他组件 */}
    </ToastContext.Provider>
  );
}

// 子组件中
import { useContext } from 'react';
import { ToastContext } from './toast-context';

function ChildComponent() {
  const toast = useContext(ToastContext);
  
  const handleClick = () => {
    toast.success('操作成功');
  };
  
  return <button onClick={handleClick}>点击我</button>;
}

最佳实践建议

1. 版本一致性：确保Monorepo中所有包使用的Sonner版本完全一致，避免使用^或~等版本范围限定符。

2. 单一安装原则：尽可能只在Monorepo的根项目中安装Sonner，其他包通过peerDependencies声明依赖。

3. 明确实例来源：在架构设计时明确toast函数的来源，避免隐式依赖。

4. 测试验证：在构建和发布前，验证跨包调用的Toast功能是否正常工作。

总结

Monorepo架构下的模块管理有其特殊性，Sonner这类依赖全局状态的库需要特别注意实例管理问题。通过理解模块解析机制和合理设计组件间通信方式，可以有效解决这类问题。在实际项目中，推荐采用显式传递实例或上下文共享的方案，既能保证功能正常，又能保持代码的清晰性和可维护性。