typescript - Can't use redux-observable with Stencil@one : "Class constructor Observable cannot be invoked without 'new'" error on ActionsObservable class

Question

I have a Stencil component library using @Stencil/redux, redux, redux-observable and redux-actions. Everything worked fine before but I'm trying to upgrade to Stencil@One (1.0.0-beta.5).

I have now an error during the Redux store creation. This is my store configuration :

import { Store, createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic } from './epic';

const epicMiddleware = createEpicMiddleware();
export const ogodStore: Store<OgodState> = createStore(rootReducer, applyMiddleware(epicMiddleware));

epicMiddleware.run(rootEpic);

The error occurs on applyMiddleware call and is the following :

TypeError: Class constructor Observable cannot be invoked without 'new'
    at new ActionsObservable (chunk-f18fe9c6.js:3744)
    at epicMiddleware (chunk-f18fe9c6.js:3830)
    at chunk-f18fe9c6.js:4579
    at Array.map (<anonymous>)
    at chunk-f18fe9c6.js:4578
    at createStore (chunk-f18fe9c6.js:4043)
    at chunk-f18fe9c6.js:4716

I am so confused over the years by the different javascript module types and targets... But here's what I know :

• This error is caused by this specific code inside redux-observable :

(ActionsObservable.__proto__ || Object.getPrototypeOf(ActionsObservable)).call(this)

• It is using call(this) to construct a ActionsObservable object, which is dependent on rxjs's Observable class
• In my Typescript configuration I use what stencil created and it's still the same for new projects (module: 'esnext', target: 'es2017')

Observable from rxjs does not support this ?! It is a class that should be constructed using ES6 syntax new because it is supported by browsers now ?

I'd really like to know if I should create an issue in redux-observable's Github ?

标签： typescriptes6-modulesredux-observablestenciljs

Answer 1

我按照@Elvynia 提供的 github 链接解决了这个问题 -

安装 redux-observable-es6-compat 并导入 -

import { createEpicMiddleware, combineEpics } from 'redux-observable-es6-compat';

代替

import { createEpicMiddleware, combineEpics } from 'redux-observable';