RxJS与Redux-Observable安装后编译失败，缺失rxjs-compat依赖

我按照Egghead教程完成Redux-Observable的基础安装并尝试实现最简示例，耗时两天仍遇到模块找不到的问题，node_modules里无法解析相关RxJS组件。

我的Epics Index代码： #

import { Observable } from 'rxjs'; 
import { combineEpics } from 'redux-observable'; 

function loadStoriesEpic(action$) { 
  return action$ 
    .do(action => console.log(action)) 
    .ignoreElements(); 
} 

export const rootEpic = combineEpics(loadStoriesEpic); 

控制台编译错误信息： #

ERROR in ./node_modules/rxjs/Observable.js
Module not found: Error: Can't resolve 'rxjs-compat/Observable' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs'
 @ ./node_modules/rxjs/Observable.js 6:9-42
 @ ./node_modules/redux-observable/lib/esm/ActionsObservable.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/Subject.js
Module not found: Error: Can't resolve 'rxjs-compat/Subject' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs'
 @ ./node_modules/rxjs/Subject.js 6:9-39
 @ ./node_modules/redux-observable/lib/esm/createEpicMiddleware.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/observable/from.js
Module not found: Error: Can't resolve 'rxjs-compat/observable/from' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs/observable'
 @ ./node_modules/rxjs/observable/from.js 6:9-47
 @ ./node_modules/redux-observable/lib/esm/ActionsObservable.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/observable/merge.js
Module not found: Error: Can't resolve 'rxjs-compat/observable/merge' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs/observable'
 @ ./node_modules/rxjs/observable/merge.js 6:9-48
 @ ./node_modules/redux-observable/lib/esm/combineEpics.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/observable/of.js
Module not found: Error: Can't resolve 'rxjs-compat/observable/of' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs/observable'
 @ ./node_modules/rxjs/observable/of.js 6:9-45
 @ ./node_modules/redux-observable/lib/esm/ActionsObservable.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/operator/filter.js
Module not found: Error: Can't resolve 'rxjs-compat/operator/filter' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs/operator'
 @ ./node_modules/rxjs/operator/filter.js 6:9-47
 @ ./node_modules/redux-observable/lib/esm/operators.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/operator/map.js
Module not found: Error: Can't resolve 'rxjs-compat/operator/map' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs/operator'
 @ ./node_modules/rxjs/operator/map.js 6:9-44
 @ ./node_modules/redux-observable/lib/esm/createEpicMiddleware.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

ERROR in ./node_modules/rxjs/operator/switchMap.js
Module not found: Error: Can't resolve 'rxjs-compat/operator/switchMap' in '/Users/laxosceles/react-portfolio-solstice/node_modules/rxjs/operator'
 @ ./node_modules/rxjs/operator/switchMap.js 6:9-50
 @ ./node_modules/redux-observable/lib/esm/createEpicMiddleware.js
 @ ./node_modules/redux-observable/lib/esm/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

Child html-webpack-plugin for "index.html":
     Asset       Size  Chunks  Chunk Names
db7499f085244c16cc8c.hot-update.json  44 bytes          [emitted]
 + 1 hidden asset
Entrypoint undefined = ./index.html

问题原因&解决方案 #

你遇到的这个问题本质是RxJS版本兼容问题：

• 你安装的RxJS是6.x及以上版本，这个版本做了重大的API重构，移除了旧的导入路径和链式操作符语法；
• 而你当前使用的Redux-Observable版本还是依赖RxJS 5.x的旧语法，所以会去寻找rxjs-compat下的兼容模块，但你没装这个包。

有两种解决方式：

方式1：快速兼容（临时方案）

直接安装rxjs-compat包，它会提供RxJS 5.x风格的导入路径和操作符，让旧版本的Redux-Observable可以正常工作：

npm install rxjs-compat --save
# 或者用yarn
yarn add rxjs-compat

方式2：升级适配（长期推荐）

如果你不想依赖兼容包，可以升级Redux-Observable到支持RxJS 6+的版本（一般是1.0.0及以上），然后按照RxJS 6+的新语法修改你的代码：

// 修改后的Epics代码
import { combineEpics } from 'redux-observable';
import { tap, ignoreElements } from 'rxjs/operators';

function loadStoriesEpic(action$) {
  return action$.pipe(
    tap(action => console.log(action)), // RxJS 6+里do改成了tap
    ignoreElements()
  );
}

export const rootEpic = combineEpics(loadStoriesEpic);

RxJS 6+的核心变化是：

• 使用pipe()方法来组合操作符，不再支持链式调用操作符；
• 操作符需要从rxjs/operators单独导入；
• 部分操作符名称做了调整（比如do→tap）。

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