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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions