NextJS: Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')

Question

每当我尝试在以下函数中将 type 属性添加到 NextJS 中的 <input> 标记时，我都会收到以下错误。


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>
    );
}

但是一旦我删除该属性，错误就会消失。我希望有人能帮我解决这个问题。

每个浏览器的 error/warning 不同：

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

野生动物园： no error or warning

火狐：

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.

但是服务器上没有错误，这是客户端错误，这就是我能够从浏览器控制台获得的所有信息。

Answer 1

我猜是因为，它像 json 一样对待键值对， {"Key":"Value"} 替换这个，

<input type={"tel"} />

有了这个，这肯定有效，

<input type="tel" />

这个问题比较棘手，https://github.com/vercel/next.js/issues/6713 在这里你可以获得可行的解决方案

Answer 2

看起来这是由于 chrome 扩展造成的... HMR 消息是 Next.JS 中的错误，已报告

NextJS: Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')

NextJS: Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')

html-input

reactjs

next.js