solidjs / solidjs/solid-router
Solid Elements don't work with Server Actions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 180
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 19
Description
Describe the bug
Description
I'd like to use power of JSX + Server Actions with making universal Web Components running anywhere, so I decided to try Solid Elements and found that works only partially, so I prepared a small demo with the bug.
Your Example Website or App
https://stackblitz.com/edit/github-becvxn?file=src%2Fcomponents%2FTest.tsx
Steps to Reproduce the Bug or Issue
- Open the app and wait to it to load
- Wait for Web Components to load, you should see Button and Form twice (first as Web Component, second as Solid component)
- Testing Button works correctly (it console.logs both on server and client)
- Form works only in Solid. Web Component redirects to http://localhost:3000
Expected behavior
As a user I expected Web Component Form to work correctly with Server Actions, but instead I get redirect to http://localhost:3000.
Screenshots or Videos
https://github.com/solidjs/solid/assets/12586960/003b5a5f-48e0-4e44-8c82-804e0c90f489
Platform
- OS: Windows
- Browser: Edge
- Version: 126.0.2592.24 (Official build) beta (64-bit)
Additional context
I tried both versions of Solid Elements, e.g. 1.8.0 and 2.0.0-beta.1.
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.
Research direction
Start with the linked StackBlitz reproduction, especially src/components/Test.tsx, and compare the Web Component and Solid component versions of Button and Form. Reproduce the Form submission with Server Actions and trace why the Web Component redirects to http://localhost:3000; done means the Web Component Form behaves like the Solid version.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- backend, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100