Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using React Dev Tools with Preact

I have just got preact-redux-example up and running, and now I am attempting to use Preact Dev Tools in my app.

Based on this post I assumed it was a case of adding

import 'preact/devtools'

into the entry point (app.js) file.

However, this yields the following error:

./src/components/app.js
Module not found: Error: Cannot resolve module 'preact/devtools'

Is there something else I need to install, or am I on the wrong track?

like image 801
alanbuchanan Avatar asked Feb 19 '17 13:02

alanbuchanan


People also ask

How do you use Preact dev tools?

The Preact Devtools can be installed in the extension store of your browser. Once installed we need to import preact/debug somewhere to initialize the connection to the extension. Make sure that this import is the first import in your whole app. preact-cli does include the preact/debug package automatically.

Can I use React library in Preact?

preact/compat is our compatibility layer that allows you to leverage the many libraries of the React ecosystem and use them with Preact. This is the recommended way to try out Preact if you have an existing React app. This lets you continue writing React/ReactDOM code without any changes to your workflow or codebase.

Does Preact use JSX?

Rendering JSX Out of the box, Preact provides an h() function that turns your JSX into Virtual DOM elements (here's how). It also provides a render() function that creates a DOM tree from that Virtual DOM.

Why is Preact smaller than React?

Preact creates a Virtual DOM implementation that takes advantage of web standards so less code has to be shipped. The result enabled a 3kb library size, which is much smaller than React, a faster virtual DOM, and the ability to avoid transpilation by using HTM tagged template literals instead of JSX.


1 Answers

preact/devtools has landed in version 6.4.0, but the example project uses version 4.8.0. So you need to upgrade the preact version to be able to import it:

npm install --save preact@latest

Or if you're using yarn you can run:

yarn upgrade preact
like image 110
Michael Jungo Avatar answered Sep 27 '22 22:09

Michael Jungo