NextJS：未捕获的类型错误：无法读取未定义的属性（读取“属性”）

Posted 2023-03-05

【中文标题】NextJS：未捕获的类型错误：无法读取未定义的属性（读取“属性”）

【英文标题】：NextJS: Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')

【发布时间】：2021-12-25 21:15:21

【问题描述】：

每当我尝试在以下函数中的 NextJS 中将 type 属性添加到 <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>
    );

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

每个浏览器的错误/警告都不同：

铬：

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

火狐：

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.

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

【参考方案1】：

我猜是因为，它把它当作带有键值对的 json， "Key":"Value" 替换这个，

<input type="tel" />

有了这个，这肯定会起作用，

<input type="tel" />

这个问题很棘手，https://github.com/vercel/next.js/issues/6713 在这里你可以得到有效的解决方案

【讨论】：

不行，不行，已经试过了：/

你能不能把你的错误堆栈跟踪，是因为refs

我更新了这个问题，提供了一些有用的细节，但我不确定如何获取堆栈跟踪，因为服务器上没有错误，只有浏览器和浏览器把这些信息扔回去

【参考方案2】：

看起来这是由于 chrome 扩展引起的... 并且 HMR 消息是 Next.JS 中的一个错误，已被报告