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?
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With