SolidJS•15mo ago

ESLint error: ref is never reassigned, use const

With a farily simple practice app set up with TS + ESLint, there seems to be an issue when using refs in Solid. ESLint is reporting a lonely let myForm: HTMLFormElement as unused, despite it being passed to a ref prop later on in the code,

function MyComponent() {
  let myForm: HTMLFormElement = undefined;
  // ...
  return <form ref={myForm}>{*/ ... */}</form>

function MyComponent() {
  let myForm: HTMLFormElement = undefined;
  // ...
  return <form ref={myForm}>{*/ ... */}</form>

The error reported by ESLint is

'myForm' is never reassigned. Use 'const' instead. eslint(prefer-const)

'myForm' is never reassigned. Use 'const' instead. eslint(prefer-const)

Is the above code following the expected patterns / best practices? The ESLint config is using Solid's plugin,

env:
  browser: true
  es2021: true
  node: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:solid/typescript
  - prettier
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - "@typescript-eslint"
  - solid

env:
  browser: true
  es2021: true
  node: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:solid/typescript
  - prettier
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - "@typescript-eslint"
  - solid

3 Replies

thetarnav•15mo ago

removing = undefined does the trick it seems if it doesn't have an initial value eslint probably assumes that it will be set later even if it isn't so it's

let my_form: HTMLFormElement | undefined
// or
let my_form!: HTMLFormElement

let my_form: HTMLFormElement | undefined
// or
let my_form!: HTMLFormElement

or you can explicitely do ref={el => my_form = el}

aryzingOP•15mo ago

Thanks, ended up going with your first suggestion,

let my_form: HTMLFormElement | undefined

let my_form: HTMLFormElement | undefined

high1•15mo ago

You could also use a signal

const [form, setForm] = createSignal<HTMLFormElement>()

const [form, setForm] = createSignal<HTMLFormElement>()

and then use setter in the markup

return <form ref={setForm} ...

return <form ref={setForm} ...

Gaming

Programming

ESLint error: ref is never reassigned, use const