posit-dev / posit-dev/py-shiny
js-react template: output renderComp throws on null initial payload
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 1.8k
- Forks
- 135
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 21
Description
Summary
The js-react shiny create template's example app raises a client-side error on first render:
Cannot destructure property 'value' of 'object null' as it is null
The error is thrown inside the template's own renderComp in shiny/templates/package/js-react/srcts/index.tsx:
makeReactOutput<{ value: string }>({
name: "custom-component-output",
selector: "custom-component-output",
renderComp: ({ value }) => ( // ← destructures `value`, but the payload is `null`
<div style={{ backgroundColor: value, ... }} />
),
});
When @posit-dev/shiny-bindings-react's renderValue(el, payload) is invoked with payload === null during the initial output lifecycle, the destructure of null throws.
Reproduction
shiny create --template js-react --package-name my_component --dir /tmp/my_component
cd /tmp/my_component
npm ci && npm run build
pip install -e . shiny
shiny run example-app/app.py
# open in browser → red error overlay / DevTools console shows the destructure error
Fix (probably template-side)
Either guard the renderComp:
renderComp: (data) => {
if (!data) return null;
return <div style={{ backgroundColor: data.value, ... }} />;
}
…or change @posit-dev/shiny-bindings-react to skip rendering when the payload is null.
Pre-existing, not a regression
Verified the bug is unrelated to #2237's lodash bump — it reproduces against both the original lodash 4.17.21 lockfile from main and the patched 4.18.1 lockfile in #2237. See #2237 for the testing setup that surfaced this.
Contributor guide
No contributing guide indexed for this repository
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 shiny/templates/package/js-react/srcts/index.tsx and reproduce the issue using the listed shiny create, npm, and shiny run commands. Check the initial render path where renderComp receives a null payload. Done means the generated example app opens without the destructuring error during its first render.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100