Preact: Devtools Error, also with 8.5.2 (Chrome Version 76.0.3809.100 (64-bit), but not debian/firefox

[tkassila]

preact-cli 2.2.1 was created a new preact project with create material and create default. Then
with debug flags, require and web configs I get the error: (npm 6.10.3, latest debian, React Developer Tools 4.0.4 (8/18/2019)

backend.js:9 Uncaught (in promise) TypeError: Cannot read property '_topLevelWrapper' of undefined
at Object.mountComponent (backend.js:9)
at Object.e. [as mountComponent] (backend.js:9)
at eval (devtools.js?69b5:249)
at visitNonCompositeChildren (devtools.js?69b5:349)
at Object.componentAdded (devtools.js?69b5:247)
at Object.preact.options.afterMount (devtools.js?69b5:384)
at flushMounts (preact.js?10a9:100)
at renderComponent (preact.js?10a9:319)
at rerender (preact.js?10a9:39)

[tkassila]

This bug comes when you have clicked different home or profile menu (default and material template apps).

[Friph]

Same error for me :(

[marvinhagemeister]

@tkassila @Friph does npm install [email protected] resolve it for you guys? I noticed that an older version of Preact will be installed by default which is broken. I'm currently updating the templates.

[tkassila]

No it resolved not at all: the same error. (I also chnaged earlier into
8.5.2 in package.json and gave npm install command and npm start. All
dependences are:

"dependencies": {
"preact": "^8.5.2",
"preact-compat": "^3.19.0",
"preact-material-components": "^1.5.8",
"preact-render-to-string": "^4.1.0",
"preact-router": "^2.6.1"
}

Tuomas

On Mon, 19 Aug 2019 at 10:19, Marvin Hagemeister [e-mail]
wrote:

@tkassila https://github.com/tkassila @Friph https://github.com/Friph
does npm install [email protected] resolve it for you guys? I noticed that an
older version of Preact will be installed by default which is broken. I'm
currently updating the templates.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/preactjs/preact/issues/1882?email_source=notifications&email_token=AAAXIA42TDZQG2B66DONXYTQFJCPNA5CNFSM4IMXJGJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4R6CGQ#issuecomment-522445082,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAXIA4DUOQX5VQ7DQRIND3QFJCPNANCNFSM4IMXJGJA
.

--
Tuomas Kassila
tuomas.[email protected]

[marvinhagemeister]

@tkassila that's strange. Can you share a repo where the issue can be reproduced? I tried various scenarios locally, but they all work.

EDIT: Found a way to reproduce the described issue :tada:

[tkassila]

Hi, this url is pointing my test3 project, now at github:
https://github.com/tkassila/test3.git
Hope it helps.

Tuomas

On Mon, 19 Aug 2019 at 10:55, Marvin Hagemeister [e-mail]
wrote:

@tkassila https://github.com/tkassila that's strange. Can you share a
repo where the issue can be reproduced? I tried various scenarios locally,
but they all work.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/preactjs/preact/issues/1882?email_source=notifications&email_token=AAAXIA7RVBQX6CWDPZ2K47TQFJGV5A5CNFSM4IMXJGJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4SAYVI#issuecomment-522456149,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAXIA5NU3IFLCVEDZWQOV3QFJGV5ANCNFSM4IMXJGJA
.

--
Tuomas Kassila
tuomas.[email protected]

[tkassila]

Hi,
little testing: when you load from browser: locatlhost:8080 or
locatlhost:8080/profile all works well. Even after the same error, but you
selected from menu and either selected 'home' or 'profile', you will get an
error, the same error we spoke earlier.

Tuomas

On Mon, 19 Aug 2019 at 14:45, Tuomas Kassila [e-mail]
wrote:

Hi, this url is pointing my test3 project, now at github:
https://github.com/tkassila/test3.git
Hope it helps.

Tuomas

On Mon, 19 Aug 2019 at 10:55, Marvin Hagemeister [e-mail]
wrote:

@tkassila https://github.com/tkassila that's strange. Can you share a
repo where the issue can be reproduced? I tried various scenarios locally,
but they all work.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/preactjs/preact/issues/1882?email_source=notifications&email_token=AAAXIA7RVBQX6CWDPZ2K47TQFJGV5A5CNFSM4IMXJGJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4SAYVI#issuecomment-522456149,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAXIA5NU3IFLCVEDZWQOV3QFJGV5ANCNFSM4IMXJGJA
.

--
Tuomas Kassila
tuomas.[email protected]

--
Tuomas Kassila
tuomas.[email protected]

[tkassila]

Hi,

I must say, that also with firefox get an error, but an error is different:
(with debug start and without debug code and debug start)

Tuomas

TypeError: r is undefined[Learn More]
backend.js:9:9988
mountComponent
moz-extension://9ce5887c-2a20-4326-8ba8-0884fca3b5b6/build/backend.js:9:9988
u/e[t]
moz-extension://9ce5887c-2a20-4326-8ba8-0884fca3b5b6/build/backend.js:9:7176
componentAdded
devtools.js:251
initDevTools/preact.options.afterMount
devtools.js:384
flushMounts
preact.js:100
renderComponent
preact.js:319
forceUpdate
preact.js:398
routeTo
preact-router.es.js:269
routeTo
preact-router.es.js:155
route
preact-router.es.js:138
Header/_this.linkTo/<
index.js:32
eventProxy
preact.js:95

On Tue, 20 Aug 2019 at 01:12, Tuomas Kassila [e-mail]
wrote:

Hi,
little testing: when you load from browser: locatlhost:8080 or
locatlhost:8080/profile all works well. Even after the same error, but you
selected from menu and either selected 'home' or 'profile', you will get an
error, the same error we spoke earlier.

Tuomas

On Mon, 19 Aug 2019 at 14:45, Tuomas Kassila [e-mail]
wrote:

Hi, this url is pointing my test3 project, now at github:
https://github.com/tkassila/test3.git
Hope it helps.

Tuomas

On Mon, 19 Aug 2019 at 10:55, Marvin Hagemeister <
[email protected]> wrote:

@tkassila https://github.com/tkassila that's strange. Can you share a
repo where the issue can be reproduced? I tried various scenarios locally,
but they all work.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/preactjs/preact/issues/1882?email_source=notifications&email_token=AAAXIA7RVBQX6CWDPZ2K47TQFJGV5A5CNFSM4IMXJGJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4SAYVI#issuecomment-522456149,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAXIA5NU3IFLCVEDZWQOV3QFJGV5ANCNFSM4IMXJGJA
.

--
Tuomas Kassila
tuomas.[email protected]

--
Tuomas Kassila
tuomas.[email protected]

--
Tuomas Kassila
tuomas.[email protected]

[Pczek]

Same issue here on MacOS Mojave and Chrome 76.0.3809.100 preact:8.5.2.
Safari works fine.

[marvinhagemeister]

FYI: We're working on it, but it's not an easy fix.

[flexdinesh]

Don't mean to sound demanding. Can we expect a fix sometime soon?

[marvinhagemeister]

Blogged about it two days ago: https://marvinh.dev/blog/state-of-devtools-2/

[flexdinesh]

@marvinhagemeister Nice. I can beta test and give early feedback if it will help. Thanks again!

[Sexual]

@marvinhagemeister It's been a few months now. Any updates?

[flexdinesh]

Yo @Sexual you're not allowed to comment on GH issues. The notification email I received from your comment looked like it's NSFW email.

_Edit: This is meant in a funny tone. Don't take it seriously. I love handles with humorous names. 😃_

[korenskoy]

@flexdinesh, sorry, but who decided that he should not comment on issues?

[flexdinesh]

@korenskoy I meant in a funny tone. Sorry if that was not apparent. Nobody says @Sexual cannot comment on issues. FWIW I'm here for those emails. 😃

[marvinhagemeister]

The extension is ready and has been approved by both the Chrome and Firefox stores. They are currently unlisted and won't turn up if you search for them, because we need someone to review and merge #2148 to make it work. The PR is a bit longer than our usual one-liners and this week was thanksgiving in the US, so reviewing may take longer than usual.

If you feel adventurous and want to try out the branch yourself, you can install the extension via the download links on: https://preactjs.github.io/preact-devtools/

For now I've focused on getting the integration supported for 10.x, so the 8.x release line is still on the todo list.

[marvinhagemeister]

FYI: Everyone on Preact X can use the just released preact-devtools. See the announcement here: https://github.com/preactjs/preact/releases/tag/10.1.0

[DamianRivas]

Ah, this is wonderful! There should probably be an update to this page: https://preactjs.com/guide/v10/debugging/

I would do it but I'm new to the community and I'm not sure about some things, are we moving away from supporting React Dev Tools? @marvinhagemeister

[teodragovic]

I would be up for updating docs and submitting PR.

[marvinhagemeister]

@DamianRivas Very true, I haven't gotten around to do that due to work related demands.

@teodragovic I'd love that! You'll find the source by clicking the Edit on GitHub link on the top of the page :+1:

[JoviDeCroock]

Closing due to us moving to our own DevTools extension which is documented on the preact site.