preactjs / preactjs/preact-devtools

Extension does not detect Preact usage without build tools

Open
#432 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
345
Forks
39
PR merge metrics
No merged PRs in 30d

Description

When using Preact without build tools and the Chrome extension, I consistently get the message, This page doesn't seem to be using Preact. There are no errors in the console.

Not tested on Firefox.

Reproduction Steps

Edit: Changed repro to include changes from #299, which still exhibits the same behavior.
index.html

<!DOCTYPE html>
<html>
  <body>  
    <div id="app"></div>
    <script type="module">
      import "https://cdn.skypack.dev/preact/devtools";

      import { h, Component, render } from "https://cdn.skypack.dev/preact";
      import htm from "https://cdn.skypack.dev/htm";

      const html = htm.bind(h);

      const App = () => html`<h1>Hello World!</h1>`;
      render(html`<${App} />`, document.getElementById("app"));
    </script>
  </body>
</html>
Details

preact 10.11.1
Preact Developer Tools 4.6.0
Chrome 106.0.5249.103

Similar/Related Issues

#85, preactjs/preact#2571, #283 (where the above example came from)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied index.html reproduction in Chrome using Preact 10.11.1 and Preact Developer Tools 4.6.0, then trace the extension's detection path for pages loaded without build tools. Done means the extension recognizes the Preact app and no longer shows the message that the page does not seem to be using Preact.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.