Store: App failing with version 3.0.0-rc.1 but not with 2.0.0

Created on 18 Apr 2018  路  6Comments  路  Source: ngxs/store 
* ngxs: 3.0.0-rc.1
* @angular/core: 4.4.6

Repro steps

Just bundle the code with webpack and open the application in the browser

Observed behavior

This is what you can see in the browser console:

zone.js:569 Unhandled Promise rejection: __webpack_require__.i(...) is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: __webpack_require__.i(...) is not a function
    at StateFactory.invokeActions (ngxs-store.js:364)
    at ngxs-store.js:525
    at ngxs-store.js:414
    at ngxs-store.js:419
    at NgxsReduxDevtoolsPlugin.handle (ngxs-devtools-plugin.js:26)
    at ngxs-store.js:414
    at Store._dispatch (ngxs-store.js:535)
    at Store.dispatch (ngxs-store.js:481)
    at new NgxsRootModule (ngxs-store.js:629)
    at _createClass (core.es5.js:9539)
    at _createProviderInstance$1 (core.es5.js:9503)
    at initNgModule (core.es5.js:9456)
    at new NgModuleRef_ (core.es5.js:10553)
    at createNgModuleRef (core.es5.js:10537)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822)
    at NgModuleFactory_.create (core.es5.js:13830)
    at core.es5.js:4497
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:365)
    at Object.onInvoke (core.es5.js:3890)
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:364)
    at Zone.710.Zone.run (zone.js:125)
    at NgZone.run (core.es5.js:3821)
    at PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4495)
    at core.es5.js:4537
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:365)
    at Zone.710.Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.710.ZoneDelegate.invokeTask (zone.js:398)
    at Zone.710.Zone.runTask (zone.js:165)
    at drainMicroTaskQueue (zone.js:593)
    at HTMLDocument.ZoneTask.invoke (zone.js:464) TypeError: __webpack_require__.i(...) is not a function
    at StateFactory.invokeActions (https://localhost:8099/js/app.7ac792164f89528246ec.js:49495:89)
    at https://localhost:8099/js/app.7ac792164f89528246ec.js:49656:22
    at https://localhost:8099/js/app.7ac792164f89528246ec.js:49545:17
    at https://localhost:8099/js/app.7ac792164f89528246ec.js:49550:35
    at NgxsReduxDevtoolsPlugin.handle (https://localhost:8099/js/app.7ac792164f89528246ec.js:104077:16)
    at https://localhost:8099/js/app.7ac792164f89528246ec.js:49545:17
    at Store._dispatch (https://localhost:8099/js/app.7ac792164f89528246ec.js:49666:12)
    at Store.dispatch (https://localhost:8099/js/app.7ac792164f89528246ec.js:49612:27)
    at new NgxsRootModule (https://localhost:8099/js/app.7ac792164f89528246ec.js:49760:15)
    at _createClass (https://localhost:8099/js/app.7ac792164f89528246ec.js:10059:20)
    at _createProviderInstance$1 (https://localhost:8099/js/app.7ac792164f89528246ec.js:10023:26)
    at initNgModule (https://localhost:8099/js/app.7ac792164f89528246ec.js:9976:28)
    at new NgModuleRef_ (https://localhost:8099/js/app.7ac792164f89528246ec.js:11073:9)
    at createNgModuleRef (https://localhost:8099/js/app.7ac792164f89528246ec.js:11057:12)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (https://localhost:8099/js/app.7ac792164f89528246ec.js:13342:12)
    at NgModuleFactory_.create (https://localhost:8099/js/app.7ac792164f89528246ec.js:14350:25)
    at https://localhost:8099/js/app.7ac792164f89528246ec.js:5017:61
    at ZoneDelegate.710.ZoneDelegate.invoke (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20136:26)
    at Object.onInvoke (https://localhost:8099/js/app.7ac792164f89528246ec.js:4410:33)
    at ZoneDelegate.710.ZoneDelegate.invoke (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20135:32)
    at Zone.710.Zone.run (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:19896:43)
    at NgZone.run (https://localhost:8099/js/app.7ac792164f89528246ec.js:4341:69)
    at PlatformRef_._bootstrapModuleFactoryWithZone (https://localhost:8099/js/app.7ac792164f89528246ec.js:5015:23)
    at https://localhost:8099/js/app.7ac792164f89528246ec.js:5057:59
    at ZoneDelegate.710.ZoneDelegate.invoke (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20136:26)
    at Zone.710.Zone.run (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:19896:43)
    at https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20531:57
    at ZoneDelegate.710.ZoneDelegate.invokeTask (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20169:31)
    at Zone.710.Zone.runTask (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:19936:47)
    at drainMicroTaskQueue (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20364:35)
    at HTMLDocument.ZoneTask.invoke (https://localhost:8099/js/polyfills.7ac792164f89528246ec.js:20235:25)
consoleError @ zone.js:569
handleUnhandledRejection @ zone.js:574
_loop_1 @ zone.js:609
drainMicroTaskQueue @ zone.js:613
ZoneTask.invoke @ zone.js:464
zone.js:571 Error: Uncaught (in promise): TypeError: __webpack_require__.i(...) is not a function
TypeError: __webpack_require__.i(...) is not a function
    at StateFactory.invokeActions (ngxs-store.js:364)
    at ngxs-store.js:525
    at ngxs-store.js:414
    at ngxs-store.js:419
    at NgxsReduxDevtoolsPlugin.handle (ngxs-devtools-plugin.js:26)
    at ngxs-store.js:414
    at Store._dispatch (ngxs-store.js:535)
    at Store.dispatch (ngxs-store.js:481)
    at new NgxsRootModule (ngxs-store.js:629)
    at _createClass (core.es5.js:9539)
    at _createProviderInstance$1 (core.es5.js:9503)
    at initNgModule (core.es5.js:9456)
    at new NgModuleRef_ (core.es5.js:10553)
    at createNgModuleRef (core.es5.js:10537)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822)
    at NgModuleFactory_.create (core.es5.js:13830)
    at core.es5.js:4497
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:365)
    at Object.onInvoke (core.es5.js:3890)
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:364)
    at Zone.710.Zone.run (zone.js:125)
    at NgZone.run (core.es5.js:3821)
    at PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4495)
    at core.es5.js:4537
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:365)
    at Zone.710.Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.710.ZoneDelegate.invokeTask (zone.js:398)
    at Zone.710.Zone.runTask (zone.js:165)
    at drainMicroTaskQueue (zone.js:593)
    at HTMLDocument.ZoneTask.invoke (zone.js:464)
    at StateFactory.invokeActions (ngxs-store.js:364)
    at ngxs-store.js:525
    at ngxs-store.js:414
    at ngxs-store.js:419
    at NgxsReduxDevtoolsPlugin.handle (ngxs-devtools-plugin.js:26)
    at ngxs-store.js:414
    at Store._dispatch (ngxs-store.js:535)
    at Store.dispatch (ngxs-store.js:481)
    at new NgxsRootModule (ngxs-store.js:629)
    at _createClass (core.es5.js:9539)
    at _createProviderInstance$1 (core.es5.js:9503)
    at initNgModule (core.es5.js:9456)
    at new NgModuleRef_ (core.es5.js:10553)
    at createNgModuleRef (core.es5.js:10537)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822)
    at NgModuleFactory_.create (core.es5.js:13830)
    at core.es5.js:4497
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:365)
    at Object.onInvoke (core.es5.js:3890)
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:364)
    at Zone.710.Zone.run (zone.js:125)
    at NgZone.run (core.es5.js:3821)
    at PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4495)
    at core.es5.js:4537
    at ZoneDelegate.710.ZoneDelegate.invoke (zone.js:365)
    at Zone.710.Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.710.ZoneDelegate.invokeTask (zone.js:398)
    at Zone.710.Zone.runTask (zone.js:165)
    at drainMicroTaskQueue (zone.js:593)
    at HTMLDocument.ZoneTask.invoke (zone.js:464)
    at resolvePromise (zone.js:712) [<root>]
    at resolvePromise (zone.js:683) [<root>]
    at :8099/js/polyfills.7ac792164f89528246ec.js:20531:17 [<root>]
    at Zone.710.Zone.runTask (zone.js:165) [<root> => <root>]
    at drainMicroTaskQueue (zone.js:593) [<root>]
    at HTMLDocument.ZoneTask.invoke (zone.js:464) [<root>]
consoleError @ zone.js:571
handleUnhandledRejection @ zone.js:574
_loop_1 @ zone.js:609
drainMicroTaskQueue @ zone.js:613
ZoneTask.invoke @ zone.js:464

Mention any other details that might be useful (optional)

With the previous version (2.0.0) it's working perfectly fine

picture guinnberg

All 6 comments

Sorry if I am irrelevant
I used to see errors like those. The cure was rm -rf node_modules && npm install

AlgoTrader picture AlgoTrader on 18 Apr 2018

See Issue #303. Ngxs 3.0 is made for Angular 6 / RxJs 6.

Koen967 picture Koen967 on 18 Apr 2018
👍1

One more check point is rxjs should be "rxjs": "^5.6.0-forward-compat.4" when Angluar is 5
I use ngxs 3 with Angular 5, the only new dep is updated rxjs

AlgoTrader picture AlgoTrader on 18 Apr 2018
👍1

Yes, that seems to be the issue. Thanks!

guinnberg picture guinnberg on 18 Apr 2018

@amcdnl @AlgoTrader It is a good thing that can fix this problem, but... I think that the different versions of @ngxs as they are 2.0.0 and 3.x.x SHOULD WORK in the version 4,5 and the next 6 of Angular, Because it would deprive a user who already has made an application in Angular 5 for example, to use all the good things that have the version 3.x.x

mailok picture mailok on 18 Apr 2018
👍1

3.0 only works with new typescript and angular

amcdnl picture amcdnl on 8 May 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

abalad picture abalad  路  5Comments
Newbie012 picture Newbie012  路  4Comments
ToxicToast picture ToxicToast  路  6Comments
CheckMater picture CheckMater  路  5Comments
un33k picture un33k  路  4Comments