Skip to content

passthrough ref callback causes (Cannot set property which has only a getter) #77

@tmm1

Description

@tmm1

a component approximately like:

export const InlineTextArea = (props: {
	setRef?: (ref: HTMLInputElement) => void;
}) => {
	return (
		<input
			ref={props.setRef}

is normally translated to:

export const InlineTextArea = (props: {
  setRef?: (ref: HTMLInputElement) => void;
}) => {
  return (() => {
    const _el$ = _tmpl$();
    const _ref$ = props.setRef;
    typeof _ref$ === "function" ? _$use(_ref$, _el$) : props.setRef = _el$;

but with solid-refresh:

const _REGISTRY = _$$registry();
const InlineTextArea_1 = _$$component(_REGISTRY, "InlineTextArea_1", _props => /*@refresh jsx-skip*/(() => {
  var _el$ = _tmpl$();
  var _ref$ = _props.v0;
  typeof _ref$ === "function" ? _$use(_ref$, _el$) : _props.v0 = _el$;
...

export const InlineTextArea = _$$component(_REGISTRY, "InlineTextArea", (props: {
  setRef?: (ref: HTMLInputElement) => void;
}) => {
  return /*@refresh jsx-skip*/_$createComponent(InlineTextArea_1, {
    get v0() {
      return props.setRef;
    },

the _props.v0 = breaks:

TypeError: Cannot set property v0 of #<Object> which has only a getter
    at _$$component.location 
    at solid-refresh.mjs

my workaround is:

 		<input
-			ref={props.setRef}
+			ref={props.setRef ?? (() => {})}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions