Questions tagged [preact]
Used for questions related to Preact, a fast 3kb alternative to React.
536
questions
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(...
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: "&...
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 ...
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';
// ...
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 () => ...
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 ...
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/...
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 ...
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"> ...
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&...
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> {
...
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 ...
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 ...
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 ...
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 ...
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.
...
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....
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, ...
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/...
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:...
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]'...
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';
...
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 ...
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 ...
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 ...
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 ...
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 ...
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'...
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 ...
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 ...
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: ...
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 ...
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 ...
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:...
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&...
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
---
...
...
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();
...
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(
<...
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,...
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 ...
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/...
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 ...
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 ...
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 ...
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
...
-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 ...
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 ...
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 ...
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, ...
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 ...