将MUI模板转为Storybook时，Context API/Redux组件报错求助

核心问题 #

打包后的npm包中，依赖Context API或Redux的组件无法正常运行，无依赖组件可正常使用，且已在构建入口传入对应Provider。

排查与解决方法 #

• 确认Provider作用范围：
  构建入口的Provider仅作用于包内部组件树，当组件被外部项目（如Storybook）引入时，外部组件树未被该Provider包裹。需在组件的使用环境（比如Storybook配置或外部项目的根组件）中，给依赖状态的组件上层包裹对应的Context/Redux Provider，而非仅在打包入口添加。

• 检查打包依赖配置：
  在package.json中通过peerDependencies声明React、Redux等核心依赖，避免将这些包打包进npm包导致多实例冲突（比如React双实例引发Context无法共享）。示例配置：

  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "redux": "^4.2.0",
    "@reduxjs/toolkit": "^1.9.0"
  }
  

  同时确保dependencies中不包含这些依赖，防止重复打包。

• Storybook全局配置Provider：
  在.storybook/preview.js中添加全局装饰器，让所有故事都能访问状态：

  import { Provider } from 'react-redux';
  import { store } from '../src/store';
  import { YourContextProvider } from '../src/contexts/YourContext';
  
  export const decorators = [
    (Story) => (
      <Provider store={store}>
        <YourContextProvider>
          <Story />
        </YourContextProvider>
      </Provider>
    ),
  ];
  

• 验证组件导入路径：
  确保组件中导入Context或Redux hooks的路径正确，避免相对路径导致打包后解析失败，优先使用绝对导入：

  import { useDispatch } from 'react-redux';
  import { useYourContext } from '@your-package/contexts';
  

• 检查打包产物：
  解压npm pack生成的.tgz文件，确认打包后的代码中Context和Redux的引用未被错误tree-shaking或编译丢失。

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