redux-observable: Uncaught TypeError: Cannot read property 'apply' of undefined - redux-observable

Question

Hello I am trying a simple example for redux-observable. This is an example signup for a user. The appplication doesnt even start.I get the error in the end. I am getting an undefined epics array when I debug in chrome. I dont understand what I am missing. Can you please help me ?
Below is combineepics
import {combineEpics} from "redux-observable";
import { ajax } from 'rxjs/observable/dom/ajax';
import { map, catchError, mergeMap } from 'rxjs/operators'
import {ofType} from 'redux-observable'
import { merge } from 'rxjs/observable/merge';
import { createUserSuccess ,CREATE_USER_FAILURE,CREATE_USER} from '../actions/createUser';
const createUserEpic = action$ => action$.pipe(
ofType(CREATE_USER),
mergeMap(action => ajax.post("http://localhost:8080/signup", action.payload).pipe(
map(response => createUserSuccess(response)),
catchError(error => of({
type: CREATE_USER_FAILURE,
payload: error.xhr.response,
error: true
}))
))
);
const rootEpic = combineEpics(
createUserEpic
);
export default rootEpic;
Store and middleware initialization:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { createEpicMiddleware } from 'redux-observable';
import PostsIndex from "./components/posts_index";
import reducers from "./reducers";
import epics from "./epics";
//import PostsIndex from "./components/posts_index";
import Login from "./components/login";
import Signup from "./components/signup";
//import PostsShow from "./components/posts_show";
const epicMiddleware = createEpicMiddleware();
const createStoreWithMiddleware = applyMiddleware(epicMiddleware)(createStore);
const store = createStoreWithMiddleware(reducers);
epicMiddleware.run(epics);
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<Switch>
<Route path="/signup" component={Signup} />
<Route path="/" component={Login} />
</Switch>
</div>
</BrowserRouter>
</Provider>,
document.querySelector(".container")
);
createUser.js
export const CREATE_USER = "create_user";
export const CREATE_USER_FAILURE = "create_user_failure"
const ROOT_URL = "http://localhost:8080/signup";
const API_KEY = "?key=PAPERCLIP1234";
export function createUserSuccess(response) {
return {
type: CREATE_USER,
payload: response
};
}
export function createUserFailure(error) {
return {
type: CREATE_USER_FAILURE,
payload: error
};
}
Uncaught TypeError: Cannot read property 'apply' of undefined
at merger (combineEpics.js:22)
at MapSubscriber.eval [as project] (createEpicMiddleware.js:36)
at MapSubscriber._next (map.js:79)
at MapSubscriber.Subscriber.next (Subscriber.js:93)
at Subject.next (Subject.js:55)
at Function.epicMiddleware.run (createEpicMiddleware.js:70)
at eval (index.js:49)
at Object../src/index.js (bundle.js:10320)
at __webpack_require__ (bundle.js:20)
at eval (webpack:///multi_(webpack)-dev-server/client?:2:18)

Answer 1

The problem was with older version of rxjs. we need to update the rxjs verison to 6.
"redux-observable": "^1.0.0",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.3.3"