`preact-cli` isn't able to SSR if the app uses `@preact/signals`
See original GitHub issueJust started to use signals in an app I created using preact-cli, but now the SSR breaks with the following error:
❯ npm run build
> my-project@0.0.0 build
> preact build
Build [================== ] 92% (4.8s) chunk asset optimizationUnable to read file: /Users/rakesh.pai/code/my-project/src/src/index.ts
TypeError: Cannot read properties of null (reading '_u')
Cannot determine error position. This most likely means it originated in node_modules.
This could be caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.
Consider wrapping code producing error in: "if (typeof window !== "undefined") { ... }"
Alternatively use "preact build --no-prerender" to disable prerendering.
See https://github.com/preactjs/preact-cli#pre-rendering for further information.
This error message itself isn’t very useful (and I don’t know why there’s an additional /src
in the file path), but this error doesn’t occur and the build runs successfully if I remove signals.
The usage of signals is very minimal:
import { computed, signal } from '@preact/signals';
const currentState = signal('idle');
const isFormEnabled = computed(() => currentState.value !== 'loading');
const SomeComponent = () => (
<form>
<input type="text" disabled={!isFormEnabled.value} />
</form>
)
Am I doing something wrong?
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Server-Side Rendering - Preact
Server-Side Rendering (often abbreviated as "SSR") allows you to render your application to an HTML string that can be sent to the client...
Read more >SERVE SSR BUILD · Issue #940 · preactjs/preact-cli - GitHub
We build the project, as normal: preact build; We create a new server.js file which loads the built SSR bundle from step 1:...
Read more >Preact - What Is It & When to Use It? | Codete Blog
Learn what is Preact, how it's different from the top JavaScript framework React, when to use it – and last but not least...
Read more >I'd advocate most people avoid this if their intention is to write an app ...
As an example, you can use native css variables during development and compile em away for production. ... [1] https://github.com/developit/preact-cli.
Read more >Newest 'preact-router' Questions - Stack Overflow
The preact-router tag has no usage guidance. ... If you go to my Preact app on https://startupguide.vercel.app/ and click “Name Generator”, ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Fixed by #198
Sorry about that. Getting useful stack traces out of content built with Webpack has always been rather difficult, though I do spot a couple obvious issues and will try to spend some time on that.
The actual error position is in
../src/index.ts
. Our error message incorrectly assumes it’s in your source code, and so prepends/Users/rakesh.pai/code/my-project/src/
, hence the doublesrc
.Not sure what the actual issue is, just speaking to the error message itself at the moment.