I have a solid-js app running with typescript and I keep getting an error saying that getElementsByNameTag is not a function. My goal is to be able to change/get properties of the input element outside the component function. I don't know if this is the best approach, any recommendations?

Code (App.tsx):

import { Component } from 'solid-js';

const MyComponent = () => {
    return (
        <div>
            <input type="text"/>
            <p>Example Text</p>
        </div>
    );
};

const App: Component = () => {
    const component = <MyComponent/> as HTMLDivElement;
    const input = component.getElementsByNameTag("input")[0];
    
    ...

    return (
        <div>
            {component}
            ...
        </div>
    );
};

export default App;

This code is a simplified version of what i'm trying to do.

Error Message:

Uncaught (in promise) TypeError: component.getElementsByTagName is not a function
    at _Hot$$App (App.tsx:59:20)
    at @solid-refresh:10:42
    at untrack (dev.js:440:12)
    at Object.fn (@solid-refresh:10:28)
    at runComputation (dev.js:710:22)
    at updateComputation (dev.js:695:3)
    at runTop (dev.js:785:7)
    at runQueue (dev.js:857:42)
    at completeUpdates (dev.js:813:84)
    at runUpdates (dev.js:802:5)

CodePudding user response：

Ah I bet I know what it is. Hot module reload. In order for HMR to work we need to wrap the components in a createMemo so they can re-run on update. In so just equal assigning will give you a function in dev and not in prod. We don't really have a good way of doing HMR without wrapping so, your options are:

1. Use a ref either assign a variable and read it in an onMount or from a callback.
2. Turn off HMR. You can do it globally in you vite config by setting hot: false in the solid plugin or by per file annotating /* @refresh skip */ at the top.