I'm getting the following error whenever I try to add the type
attribute to <input>
tag in NextJS in the following function.
const InputComponent = ({value, prefix, id, placeholder, autoCompleteLabel}: InputComponentProps) => {
const [focused, setFocused] = useState(false);
let ref = useRef<HTMLInputElement>(null)
const onClick = () => {
setFocused(true);
};
const onBlur = () => {
setFocused(false);
};
useEffect(() => {
if (focused)
ref.current?.focus()
else
ref.current?.blur()
}, [focused]);
return (
<div className="group flex flex-col border p-2 w-full focus-within:border-black border-gray-300 transition-all space-y-1" onClick={onClick}>
<label htmlFor={id} className={"text-md"}>{value}</label>
<div className={"flex flex-row"}>
<span className={"text-gray-500"}>
{prefix}
</span>
<input ref={ref} onBlur={onBlur} type={"tel"} id={id} autoComplete={autoCompleteLabel ? autoCompleteLabel : "off"} name={id} pattern={"[0-9]{10}"} maxLength={10} placeholder={placeholder ? placeholder : ""} className={"outline-none flex-grow " + ((prefix) ? "pl-2" : "")}/>
</div>
</div>
);
}
But as soon as I remove the attribute the error disappears. I hope someone can help me out with this.
The error/warning is different on each browser:
Chrome:
content.js:formatted:2942 Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')
at Object.i [as checkAttributes] (content.js:formatted:2942)
at content.js:formatted:3141
at Object.y [as scanForm] (content.js:formatted:3143)
at y (content.js:formatted:4292)
at Object.validate (content.js:formatted:4235)
at content.js:formatted:4266
Safari:
no error or warning
Firefox:
nvalid HMR message: {"action":"sync","hash":"a3c905b1d9bff16a","warnings":[],"errors":[]}
Error: No router instance found.
You should only use "next/router" on the client side of your app.
But there is no error on the server, it is a client side error and that's all the information I'm able to get from the browser console.
Looks like this is caused due to a chrome extension... And the HMR message is a bug in Next.JS which has been reported