Preact: React DevTools doesn't work with 'preact/debug' included with Preact X

[kolnogorov]

React DevTools doesn't work with Preact X (10.0.0-rc.0).

I imported 'preact/debug' but React doesn't appear in Chrome devtools, and extension says that "This page doesn’t appear to be using React. "

I've tried both import 'preact/debug' in my index.js and require('preact/debug'), but none of these ways have taken any effect.

I import preact/debug before preact, as it said in docs.

[marvinhagemeister]

Just created a new default project with preact-cli and the devtools appear as expected. Can you (and are you allowed) to share the repo where it isn't working for you?

[developit]

@kolnogorov are you using Preact CLI? If so, what version?
Also, which version of Chrome and React DevTools?

[kolnogorov]

Unfortunatelly, i am not able to share the repo.

I did not use preact-cli, and as far as i know, it uses Preact 8 (correct me if I'm wrong), and Preact 8 works well for me with devtools (even withous preact-cli). After updating from Preact 8 to Preact X, devtools stopped working.

I have React DevTools v3.6.0 and Chrome 75.0.3770.142.

I've just installed preact-cli to take a look how it's organized there. And didn't find any preact/debug import. Also, it has preact-compat included, but i haven't it in my project.

[raulmmdev]

Hi, i don't if its related but i just want to share this error that i get when i upgrade preact to 8.5.0, with the previous version 8.4.2 works perfectly.
Uncaught TypeError: Cannot read property 'Fragment' of undefined at i (debug.module.js:1) at d (debug.module.js:1) at debug.js:1 at Object.parcelRequire.../../node_modules/preact/debug.js.preact (debug.js:1)

Sorry at the moment i can not share the repo. I hope that some one can help me. I tried to import preact/debug before and after preact also with webapck and the rest of the code is the same.
Thanks

[marvinhagemeister]

@raulmmdev Thanks for the additional information! It helped me narrow it down to a publishing issue with the 8.5.0 package. I cut a new patch release that fixes it. Can you try if the issue still remains with 8.5.1?

[raulmmdev]

@marvinhagemeister yes it's fixed, thanks !!!

[marvinhagemeister]

Closing as we can't reproduce the problem :tada:

[ccheraa]

I'm using preact/debug and apparently it works and it doesn't, this is the first line in my code:

import "preact/debug";

on chrome, the React Developers Tools extensions detects my preact app:

but when I open chrome devtools, I can't find "Components" and "Profiler" tabs.

this is my package.json file for more info:

{
  ...
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "sass": "^1.23.3",
    "typescript": "^3.7.2"
  },
  "dependencies": {
    "linkstate": "^1.1.1",
    "preact": "^10.0.4",
    "preact-router": "^3.1.0"
  }
}

PS: I'm not using preact-cli

Update:
I tried again with preact-cli default template, same problem
Windows 10
Node: 13.1.0
Preact: 10.0.1
Chrome: 78.0.3904.87
React Developer Tools: 4.2.0 (10/3/2019)

[marvinhagemeister]

@ccheraa See #1882