Stackblitz中引入redux-thunk后页面空白，问题求助

问题场景 #

在Stackblitz中编写基础Redux逻辑，store配置代码如下：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import taskReducer from './reducers/taskReducer';

const store = createStore(
  taskReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

将该代码放入src/store.js后预览面板空白，但不使用createStore或thunk时页面正常。

可能的原因及排查方案 #

• 依赖版本不兼容
  旧版Redux（基于createStore）与redux-thunk、redux-devtools-extension的版本可能存在冲突。比如redux-thunk@2.x需要搭配redux@4.x以上版本，若Stackblitz自动安装的依赖版本不匹配，会触发初始化报错阻断页面渲染。
  排查：查看package.json中的依赖版本，手动调整到兼容组合（比如redux@4.2.1 + redux-thunk@2.4.2 + redux-devtools-extension@2.13.9）。

• 依赖未正确安装
  Stackblitz有时不会自动安装新增的依赖包，若package.json的dependencies中没有redux-thunk或redux-devtools-extension，会触发模块找不到的错误，直接导致页面白屏。
  排查：检查package.json的依赖列表，若缺失则手动添加并执行安装（Stackblitz中修改package.json后通常会自动安装，若未触发可右键依赖面板选择重新安装）。

• Reducer逻辑存在隐性错误
  虽然单独使用reducer时页面正常，但结合thunk后，可能reducer中处理异步action的逻辑存在漏洞（比如未处理特定action类型、初始状态格式错误），导致store初始化失败，进而影响页面渲染。
  排查：简化reducer为最基础的结构（比如仅返回初始状态），再逐步恢复逻辑，定位错误点。

• Stackblitz iframe环境限制
  redux-devtools-extension的composeWithDevTools在Stackblitz的iframe预览环境中可能无法正常注入调试工具，导致createStore初始化失败。
  排查：暂时移除composeWithDevTools，改为createStore(taskReducer, applyMiddleware(thunk))，若页面恢复正常，则说明是devtools适配问题，可改用window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()替代官方compose方法。

• 控制台报错是核心线索
  无论哪种情况，打开Stackblitz预览面板的开发者工具（F12）查看控制台的报错信息，是定位问题最快的方式——页面空白几乎都是JavaScript运行时错误导致的，报错信息会直接指向问题根源。

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