[🐞] Defining and calling $server() function inside onClick$ causes Error: Dynamic require of "_.js" is not supported
@wmertens is already working on this.
Since May 12, 2024.
- Dominant language
- TypeScript
- Stars
- 22.1k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 52
Description
Which component is affected?
Qwik Runtime
Describe the bug
Hi,
I am defining a server function inside an onClick event handler and call it below the definition.
import { component$ } from "@builder.io/qwik";
import { server$ } from "@builder.io/qwik-city";
export default component$(() => {
return (
<button
onClick$={() => {
const serverFn = server$(() => console.log('Hi from server'));
serverFn();
}}
>
Say Hi!
</button>
);
});
In dev mode, everything works perfectly.
But in prod mode, I will get a POST error POST http://localhost:4173/?qfunc=n4X1sOI0zW0 500 (Internal Server Error) with error message saying Error: Dynamic require of "_.js" is not supported.
I was expecting no error, because dev mode works fine and what I did aligns with what Miško did in this video
I found a solution to this issue that might help finding the root cause or a fix.
Basically add another $ to wrap the function assigned to onClick$. But I guess this is not needed as onClick$ should be sufficient already, right? Anyways, hope this helps on debugging, thanks!
<button
onClick$={$(() => {
const serverFn = server$(() => console.log('Hi from server'));
serverFn();
})}
>
Say Hi!
</button>
Thanks!
Reproduction
https://stackblitz.com/edit/qwik-starter-qmzrws?file=src%2Froutes%2Findex.tsx
Steps to reproduce
- After open the link, the app should be running in dev mode by default
- The two buttons work great. Click them and the messages will be shown in terminal
- Stop the app and run it in prod mode by
npm run preview - The 2nd button still works, but the 1st button doesn't. After click the 1st button, some error messages will be shown in inspect - console
System Info
System:
OS: Windows 11 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
Memory: 2.63 GB / 15.60 GB
Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (119.0.2151.72)
Internet Explorer: 11.0.22621.1
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.