Redux-devtools: dev tools getting an error...Lazy require of extension.binding did not set the binding field

[born2net]

dev tools getting an error...Lazy require of extension.binding did not set the binding field

(CONTENT_SCRIPT context for lmhkpmbekcpmknklioeibfkpmmfibljd) Lazy require of extension.binding did not set the binding field
(CONTENT_SCRIPT context for lmhkpmbekcpmknklioeibfkpmmfibljd) extensions::lastError:82: Uncaught TypeError: Cannot convert undefined or null to object{TypeError: Cannot convert undefined or null to object
    at Object.clear (extensions::lastError:82:23)
    at handleResponse (extensions::sendRequest:84:15)
    at chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/pagewrap.bundle.js:1:1}
(CONTENT_SCRIPT context for lmhkpmbekcpmknklioeibfkpmmfibljd) extensions::messaging:9: Uncaught Natives disabled{<stack trace unavailable>}
Uncaught
  (anonymous function)  

repo: https://github.com/born2net/studioweb

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

[zalmoxisus]

Online demo would save me some time to debug, but http://ng2.javascriptninja.io redirects to http://secure.digitalsignage.com/boiler/. Is it expected? Could you please also provide some steps to reproduce?

[born2net]

yes sorry my signature is confusing.
here is link to repo demo online: https://secure.digitalsignage.com/studioweb/
and source: https://github.com/born2net/studioweb
but it seems to do it only when I debug in WebStorm :/
see image

if I disable the chrome ext dev-tools, no error

[zalmoxisus]

Well, I don't see much information here. Could you provide some steps to reproduce? Also you can run the extension in dev mode to get more details. Note that you should clone the extension's repo, not redux-devtools, which are completely different.

[born2net]

ok will be back later this afternoon and will do

[zalmoxisus]

I tried running your repo and don't get any problems (though I see you're not using the extension after logging in). Could be a problem with interfering with Webpack's extension. If you'll provide exact steps on how to debug it with Webpack so the exception occurs, I'd look into it.

[born2net]

if i was a betting man I would bet it is an issue with latest ng-cli (thus Webpack) as I am working closely with the ng-cli team and they are making major changes right now pushing towards last release.
so I believe you are right most likely related to webpack / ng-cli (I am using ng-cli .30 beta)
Here is the new repo (moved) of cli:
https://www.npmjs.com/package/@angular/cli

regards

Sean

[born2net]

I tried to compile the dev extension but no luck.
I am still seeing the issue.
Any chance someone can check with my repo:
https://github.com/born2net/studioweb

Also, I was mistaken and this is not related to ng4, same issue with ng2.
and it makes working with dev-tools really hard because my console is clobbered with error all the time.
see attached image:

TX

Sean

[born2net]

as soon as I disable the dev-tools, no more console error.
let me know and tx!

[zalmoxisus]

Hey Sean,

Once again, please provide detailed steps on what should be done in Webpack to reproduce that.

[born2net]

Hi,
So I am using angular-cli .30 which is also part of my project when you fork it, just run:
npm run dev
and that's it
If you wish I can make a video
TX
Sean

[zalmoxisus]

Sorry, I meant WebStorm not webpack. Written steps of what should be done in WebStorm would be great.

What was the issue with compiling the extension? It's just npm i && npm run buld:extension.

[born2net]

again I do apologize, my bad, it's not related to WebStorm at all.
It's an issue with redux dev-tool, thus I included a new snapshot showing console error in Chrome dev tools.
sorry for misleading.
reproducing should be real easy, standing by to assist.

[zalmoxisus]

Well, I tried the repo before and didn't get any exceptions. I synced your last changes and still don't replicate the issue:

[born2net]

:( very odd, can you please check this video:

https://dl.dropboxusercontent.com/u/93017334/ReduxErr.mp4

TX
Sean

[zalmoxisus]

As I see in the video, it's still inspected by Webstorm extension ("jetbrains ide is debugging this browser"). Could you try it without WebStorm? Just running npm run dev as I did.

I didn't use Websorm IDE debugging, if you can provide some steps, I'll check that.

[born2net]

you are absolutely right, I disabled the WebStorm debug extension and now, no more errors.
so WebStorm and Devtools are not liking each other.
What can I provide to help resolve the issue?
TX

Sean

[zalmoxisus]

WebStorm is trying to inspect the Redux Extension's script, which it shouldn't do. As told, I'm not an expert in WebStorm. If you provide some steps on how to run debugging in the IDE as you do, I'd check it. Or maybe pushing the .idea folder to github could be enough to replicate your config environment?

[born2net]

sure thing, the config is super vanilla.
see below:

be happy to provide .idea if needed but its all very simple.

[zalmoxisus]

1. I installed WebStorm's Chrome extension.
2. Added the settings like in your screenshot.
3. Clicked "debug" icon (as you can see in the video)
   And still no exceptions.

Unless I didn't miss anything, the resolution for you I guess is to build our extension in dev mode and debug it.

[born2net]

first tx for the effort and GIFs.
no idea, I am using WebStorm 2017.1 EA
https://blog.jetbrains.com/webstorm/2016/12/webstorm-2017-1-early-access-preview/
not sure if related :/

[zalmoxisus]

I'm redirected to UserLogin page, not to AutoLogin like in your video. Also I had to remove this line because you don't have this file and it fails to build. Maybe the source is different.

I'm using WebStorm 2016.2.4, but I doubt it makes any difference because the issue is related to its browser extension which is the same.

[born2net]

tx will be fixing "./libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js", on next submit
and if you click the [x] remember me, it should auto login you on the next reload

[zalmoxisus]

OK, did it, but still no exceptions :)

I suggest to close this issue since it's not related to this repo in any way, and when you have some more details, please open a new issue on https://github.com/zalmoxisus/redux-devtools-extension. Some repo watchers may be annoyed with lots of notifications, while they are not using the extension (this repo is intended to use devtools without browser extension).

I added the info in the README to avoid the confusions in future.

Thank you for the report anyway! And feel free to submit issues there.

[born2net]

thank you, I will continue this with WebStorm devs and see if I can resolve with them, tx again!

[jgfet]

I suddenly got a similar thing running an Ionic3 project. (uses Angular 4 under covers too). Using Visual Studio Code - so not specific to an IDE.

[konijn]

Got the same errors. My theory is that this is caused by breakpoints/syntax issues that happen before the <body> tag is loaded.

[Nagimesi]

@konijn That's actually what caused it. I removed all breakpoints and no errors. Thank you.