Questions tagged [preact]

Used for questions related to Preact, a fast 3kb alternative to React.

Filter by
Sorted by
Tagged with
0 votes
0 answers
19 views

Error in preact-custom-element.esm.js Module parse failed: Cannot read properties of null (reading 'name')

I try to build web component using preact custom element, below is my code import register from 'preact-custom-element'; function PreactComponent() { return (<p>Hello!</p>) } register(...
Antony rabel's user avatar
1 vote
0 answers
48 views

Reset form inputs with Signal Preact

Is it possible to clear/reset the input fields after a form is submitted using signals? For instance, in the following simple form I have the following: const formData = signal({ firstName: "&...
Ferre_Diego's user avatar
0 votes
1 answer
45 views

How to listen to changes of an signal that contains a set in preact (using signal.value.has...)

In the follwoing minimal example I would like to change the buttons' text, after the click event. The button-ids that have been clicked, are stored in a set within a signal. When the set changes, no ...
Horst Lemke's user avatar
0 votes
0 answers
26 views

Vite server does not inject tailwind when initializing from not root directory

I have Preact application that is running on Vite server. This is my vite.config.ts: import { defineConfig } from 'vite'; import * as path from 'path'; import preact from '@preact/preset-vite'; // ...
Filip Szymański's user avatar
0 votes
1 answer
45 views

Is there a way to use setInterval with preact signals in order to render a component?

I would like to achieve this behavior using signals: useEffect(() => { const interval = setInterval(() => { console.log('This will run every second!'); }, 1000); return () => ...
Ferre_Diego's user avatar
0 votes
0 answers
24 views

preact signals, how to do rendering optimization on non-primitive values

in the README of preact signals, it introduces a rendering optimizations https://github.com/preactjs/signals/blob/main/packages/preact/README.md#rendering-optimizations simply pass the signal ...
Littlee's user avatar
  • 3,871
0 votes
0 answers
98 views

Error when building React project with Vite: 'default' not exported by 'react/jsx-runtime' in @preact/signals-react v1.3.6

Description: I'm encountering an error when building my React project with Vite. The error message mentions an issue related to exporting 'default' from 'react/jsx-runtime' in the package @preact/...
ScaleUp's user avatar
  • 71
0 votes
0 answers
625 views

Comparing Performance: React Hooks with Optimization vs. Preact Signals

I am exploring options to optimize the performance of my web application, specifically in terms of minimizing unnecessary re-renders/re-calculation. I've come across Preact Signals, which seem to ...
Ajay's user avatar
  • 97
0 votes
0 answers
19 views

Preact, adding custom attribute to native button ONLY

i am using Preact with Typescript and trying to add a custom variant attribute to native html button for TS completion support to look something like this <button variant="primary"> ...
Ali Hassan's user avatar
0 votes
1 answer
49 views

node test TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".png" in Preact app

I'm importing a PNG file in my TypeScript component: import MyImage from "./MyImage.png"; export default function () { return <img src={MyImage} width="16" height="16&...
Alan P.'s user avatar
  • 2,926
0 votes
0 answers
67 views

How to declare SVG props type In Astro + Preact?

I am trying to declare a type for the props of svg, but I get a type error doing so: --- import type { SVGProps } from "preact/compat"; interface Props extends SVGProps<SVGElement> { ...
Daniell's user avatar
0 votes
0 answers
49 views

Monorepo - sharing component between React and Preact app

I have a monorepo using pnpm which contains a React app (bundled with vite). I have a new project where I want to keep the bundle low, so I thought of using Preact (vite). The idea would be, in the ...
llccrr's user avatar
  • 104
0 votes
1 answer
79 views

With preact, how to add event listener to a component hydrated from HTML

Consider the following HTML element: <div id="foo"> <div>Foo</div> </div> How can I write a preact component that, when hydrated from this HTML element, would ...
Eric MORAND's user avatar
  • 6,548
2 votes
2 answers
194 views

How to remove @license comments from source during npm build (will add manually)?

I am developing a Vite-React webapp to be used by me only, and heres my simple build command in package.json: "build": "vite build --emptyOutDir --base=./". It uses the Google ...
SKB_BGPL's user avatar
0 votes
0 answers
14 views

Why does metamask default to BNB when a custom purchase tokens has been defined?

I'm currently creating a presale dapp for fun on the BSC testnet, and all is going well. Aside from the fact that when I initiate the "buyButton", metamask seems to default to purchasing ...
hat0ken's user avatar
1 vote
1 answer
92 views

The entire component is being re-rendered when using signals

Why is my entire component being re-rendered, even though I'm using the new "signals" library? What am I doing wrong? Only the button is supposed to be re-rendered, not the entire component. ...
Cequiel's user avatar
  • 3,557
0 votes
1 answer
196 views

Preact Signals returns to default value when changing input

I'm just trying to get to grips with Preact Signals so maybe I'm doing something wrong but I'm trying to allow the user to update a value but whenever they do it just reverts back to the default value....
ashleytwo's user avatar
  • 305
0 votes
0 answers
51 views

testing asynchronous useEffect in hooks with testing-library/preact

I'm working on a preact hook that onMount fetches some data from the backend via a webSocket to then set it's initial state. The implementation by now looks something like this: import {useContext, ...
s.Bergmann's user avatar
1 vote
1 answer
634 views

How to compose preact/signals in React for a huge editable datatable

I have a datatable in react, and I'm trying to make it more lightweight so it is usable with larger datasets on weaker devices. I'm experimenting with a few things and I heard good things about preact/...
vinczemarton's user avatar
  • 7,818
0 votes
0 answers
56 views

Best practice in using document.createElement() in Preact?

So my use case is that I am using Preact and TypeScript, and I want to add OpenSeadragon to my application and I want to use Overlays feature of it. Currently I am using it like this to add an overlay:...
Kerem Nayman's user avatar
0 votes
0 answers
93 views

How do I add web components to typescript JSX type for preact on Deno?

How do I add web components to typescript JSX type for preact on Deno? /// <reference lib="dom" /> /** @jsx h */ import { PreactDOMAttributes, h } from 'https://esm.sh/[email protected]'...
ThomasReggi's user avatar
0 votes
1 answer
90 views

Import preact hooks module locally (offline)

I am trying to use preact hooks in my web application. I am going through no build tools route. Following is the code I am using to do the job import { h, render, Component } from './preact.mjs'; ...
Setsuna Cyan's user avatar
0 votes
0 answers
51 views

Jest test runs indefinitely when all tests are included

Context: I'm using Jest (v26.6.3) with Testing Library (@testing-library/preact, v2.0.1) The test file includes 5 tests. Each works in isolation, and the test runs fine if I include 4/5 tests (doesn't ...
Austin Abbott's user avatar
0 votes
0 answers
93 views

How to set up a storybook environment in preact

I'm setting up a preact development environment. I use vite for bundler and typescript for application development. I also want to install storybook(typescript) for testing After finishing all the ...
haaaam's user avatar
  • 31
0 votes
0 answers
18 views

Skipping non-js files with @babel/register

Intro I have a task to add some new features/refactor other things in not-so-new Express + Preact 10 + Webpack 5 + Babel 7 project. And I have a problem with loading non-js file running locally for ...
Ysm's user avatar
  • 15
0 votes
1 answer
243 views

Is it possible to manage the global state of an application using only signals?

I'm considering adopting Preact for library development. I was thinking of using global state management libraries like recoil, jotai together for global state management, but I was wondering if ...
sdfjka dsfn's user avatar
1 vote
1 answer
386 views

Unable to update input field values using Signals - React

I am using @preact/signals-react for state management. I have 3 input fields and a common changeHandler function. I pass a unique name for each of those input fields and update the signal to get the ...
arunmmanoharan's user avatar
0 votes
0 answers
180 views

Unit test is failing with preact and Vite with "Cannot read property '__H' of undefined"

I am using preact with Vite.The component is rendering perfectly in browser but the unit test case is giving error like this error: name: "TypeError" message: "Cannot read property '__H'...
Swaraj Ghosh's user avatar
  • 2,294
1 vote
0 answers
284 views

How to get HMR to work with Storybook (React/Preact components) in Astro project

I've been able to get storybook to work with tailwind in an astro project, by not using the official @astrojs/tailwind plugin (the preview mode won't render the tailwind styles with this plug), so ...
octavemirbeau's user avatar
0 votes
1 answer
87 views

Preact change webpack css loader config

I'd like to change the webpack config on Preact to have only hashed class names, and make them shorter as well if it's a safe practice. The css loader works fine on my preact project but sometimes the ...
Anna Drzewiecki's user avatar
1 vote
0 answers
193 views

Using glob import causes reference error in preact vite

I am trying to use the glob import from vite to subsitute my require.context that I used to use when back when I still used webpack and react. The exact error I am getting is: Uncaught ReferenceError: ...
infamous hvher's user avatar
0 votes
1 answer
58 views

Preact router not working after Parcel build

I setup a project with parcel that with a preact app. When running the project with as dev with npm run dev (It allow me to test at http://localhost:8080). When I access to http://localhost:8080 and ...
Andrianina OELIMAHEFASON's user avatar
1 vote
0 answers
318 views

Receiving `Cannot read properties of undefined (reading 'context')` error with Material UI In Preact

I have an Astro project that I'm using preact and Typescript with. When I'm trying to use a MaterialUI Typography component inside of the project I'm receiving this error: TypeError: Cannot read ...
Tony Kovar's user avatar
0 votes
1 answer
327 views

React component in Astro cannot use the window object

I'm Using preact in my Astro project. Which works fine until I added `window ReferenceError: window is not defined Now I know that Astro does SSR but in this case its a React component icw client:...
Jeanluca Scaljeri's user avatar
0 votes
0 answers
83 views

Pass value from Astro file to Preact component

I just started with Astro framework, and I must say that it is quite confusing, with code that only runs build time Anyway, here is my Astro file --- const x = signal(0); --- <input id="x&...
Jeanluca Scaljeri's user avatar
0 votes
1 answer
86 views

In Astro I try to rewrite a Preact component from function to class

There is a demo repository here which shows how to use Preact with Astro I'm going to show here only the relevant code snippets. In the astro page file the preact component is used as follows --- ... ...
Jeanluca Scaljeri's user avatar
0 votes
2 answers
195 views

How to protect routes with preact-router?

I'm able to use "preact-router" on a component level together with a authContext. Eg: export const CartPage = (): JSX.Element => { const { isAuthenticated } = useAuthContext(); ...
octavemirbeau's user avatar
1 vote
0 answers
439 views

Error "Property 'children' is missing in type 'VNode<any>' but required in type 'ReactPortal'" in Typescript Preact Redux application built using Vite

I am trying to build a Typescript-Preact-Redux application using Vite but the main.tsx file: import { render } from "preact" import { Provider } from "react-redux" render( <...
AJP's user avatar
  • 26.9k
0 votes
1 answer
91 views

Aliasing React with Preact on specific files?

Currently my project is on Ruby on rails with React frontend(on some parts of the app). Also uses Webpack. I am trying to use react-final-form(https://final-form.org/react) on just one part of the app,...
su_aseer's user avatar
0 votes
0 answers
68 views

How do I embed a preact app on an existing page

I've built a simple preact app using the default setup with preact cli's preact create. Building my app using preact build, the build folder contains index.html as an entry point/file, meaning my app ...
artooras's user avatar
  • 6,405
0 votes
0 answers
116 views

Using Preact, but module requires React - failing to deploy

I'm failing to deploy to Vercel. I get the error below. Is there anyway that I can get this deployed without downloading the react bundle? Error: Cannot find module 'react' Require stack: - /vercel/...
Lauro235's user avatar
  • 172
0 votes
0 answers
230 views

TypeError: Cannot read properties of undefined (reading '__H')

I'm using vitest testing my code which is build with preact and redux. It works find when running the site but it failed in the testing. To mock the redux store, I create a util function to render the ...
amadeus1788's user avatar
0 votes
0 answers
78 views

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script

I'm building a widget that was getting messed up because of the parent website's style component. Currently, I'm pushing everything to the shadow root like this. Without it, the style of the widget ...
Newbie_developer's user avatar
1 vote
1 answer
356 views

Preact and React in a single project

I work on a huge React code base having multiple packages. I want to try to migrate the components of a single package to Preact and rest continue with react components. How to achieve this kind of ...
Madhu Kumar Tallapalli's user avatar
0 votes
0 answers
448 views

Issue using preact with React 18 based component

I have a react 18 based component imported to the project as dependency in package.json that has a createRoot import like import { createRoot } from 'react-dom/client'; later on this code is called as ...
VerityFL's user avatar
-1 votes
2 answers
193 views

How do I control DOM elements with FreshJs

I am trying to learn the new Deno framework, FreshJS. The only thing troubling me right now is DOM control. If I wanted to dynamically update a menu item or change the color of a container how would I ...
Shekhar Maharaj's user avatar
0 votes
1 answer
106 views

Preact-router Link activeClassName is not applied when changing page

Im working on a small project and I do not get the expected behavior from preact-router, Link. It either doesnt change the page or it doesnt set the activeClassName, depending on where I import it ...
Iisak_789's user avatar
0 votes
0 answers
36 views

Stalled or nonexistent Netlify serverless function response

My serverless function will occasionally respond after a long delay, 14-30s, but most often it simply stalls without responding. This occurred soon after transferring my syntax from CommonJS to ...
Jonathan Bernal's user avatar
1 vote
1 answer
486 views

CORS preflight-request header not altered on some browsers when using Preact

I am developing a Preact project that needs to communicate with a Node.js server hosted on AWS, using the Loopback framework. To include the header api-target:rest in the requests sent to the server, ...
Adrian Royo's user avatar
0 votes
0 answers
47 views

WebComponent with preact and react wrapper eventListener issue

I am working to solve an bug in an open source project, emoji-mart. The emoji-picker is originally a webcomponent in (packages/emoji-mart) (pure component with preact), but they provide a react ...
RoseannePeeters's user avatar

1
2 3 4 5
11