Medusa Admin启动报错：模块未提供'useAdminAddLocationToSalesChannel'导出

一、版本一致性排查 #

• 检查medusa-react跨目录版本是否统一：
  在项目根目录和admin目录分别执行yarn list medusa-react，确保版本完全一致。若版本不同，在admin目录执行yarn add medusa-react@<根目录版本号>强制对齐版本。
• 确认API兼容性：useAdminAddLocationToSalesChannel是Medusa较新的钩子，若使用旧版Medusa可能不存在该导出。查看对应版本的官方API文档，若版本过低，执行以下步骤升级：
  1. 项目根目录运行yarn upgrade @medusajs/medusa@latest
  2. admin目录运行yarn upgrade @medusajs/admin@latest

二、缓存与依赖重置 #

• 清理缓存并重装依赖：

  cd medusa-store/admin
  rm -rf node_modules yarn.lock
  rm -rf .vite
  yarn install
  yarn start
  

• 验证导出存在性：直接打开node_modules/medusa-react/dist/index.d.ts，搜索useAdminAddLocationToSalesChannel确认是否存在；若为自定义代码导入，检查拼写是否正确。

三、其他排查点 #

• 重新拉取官方代码：若使用克隆的官方仓库，拉取最新代码后再执行依赖安装和启动。
• 确认功能模块启用：在medusa-config.js中检查销售渠道、仓库位置相关插件是否已配置启用。

一、全局ErrorBoundary组件 #

创建捕获渲染错误的边界组件：

// components/ErrorBoundary.jsx
import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Admin页面错误:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>页面加载出错</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>刷新重试</button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

在根组件中引入：

// src/main.jsx
import ErrorBoundary from "./components/ErrorBoundary";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>
);

二、React Router路由级错误捕获（v6+） #

给路由配置errorElement捕获路由加载错误：

// src/routes.jsx
import { Routes, Route } from "react-router-dom";
import Dashboard from "./pages/Dashboard";
import SalesChannels from "./pages/SalesChannels";
import ErrorPage from "./pages/ErrorPage";

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />} />
      <Route 
        path="/sales-channels" 
        element={<SalesChannels />} 
        errorElement={<ErrorPage />} 
      />
      <Route path="*" errorElement={<ErrorPage />} />
    </Routes>
  );
}

export default AppRoutes;

错误页面组件实现：

// pages/ErrorPage.jsx
import { useRouteError } from "react-router-dom";

export default function ErrorPage() {
  const error = useRouteError();
  console.error("路由错误:", error);

  return (
    <div className="error-page">
      <h1>Oops! 页面加载失败</h1>
      <p>抱歉，当前页面无法正常访问。</p>
      <p>{error?.statusText || error?.message}</p>
      <a href="/">返回首页</a>
    </div>
  );
}

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