vConsole
vConsole copied to clipboard
Tencent
Network not working: "TypeError: Cannot convert undefined or null to object" in next.js 13.4.4 app router
vConsole Version: latest
Issue Title: network not working: "TypeError: Cannot convert undefined or null to object" in next.js 13.4.4 app router
Description:
- When page on load, the vconsole panel can be opened as well as the network panel.
- After navigating around in my next.js app, the vconsole panel cannot be opened (after click) and there is error shows up: Uncaught (in promise) TypeError: Cannot convert undefined or null to object
Steps to Reproduce (if applicable):
- Go forward and back in next.js app. （pages should perform requests）
- click the vconsole floating panel.
Expected Behavior: The Network panel can be opened and track the network activities.
Actual Behavior: The vconsole panel and the Network panel cannot track the network activities.
Additional Information: Error message:
vconsole.min.js:10 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
at Function.entries (<anonymous>)
at po (vconsole.min.js:10:230313)
at Array.xo (vconsole.min.js:10:239253)
at y (vconsole.min.js:10:123857)
at Array.ue (vconsole.min.js:10:189716)
at y (vconsole.min.js:10:123857)
at Cn (vconsole.min.js:10:176259)
at xt (vconsole.min.js:10:129051)
at new e (vconsole.min.js:10:177517)
at se (vconsole.min.js:10:190371)
at bt (vconsole.min.js:10:127194)
at Object.p (vconsole.min.js:10:189407)
at Object.p (vconsole.min.js:10:193586)
at lt (vconsole.min.js:10:126559)
at st (vconsole.min.js:10:126239)
Screenshot:
Snippets:
"use client";
import React, { useEffect, useState } from "react";
import Script from "next/script";
const VConsoleWrapper = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (mounted) {
return (
<>
<Script
src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"
onLoad={() => {
new VConsole();
}}
></Script>
</>
);
} else {
return null;
}
};
export default VConsoleWrapper;
import "@/styles/globals.css";
import { Metadata } from "next";
import Script from "next/script";
import VConsoleWrapper from "@/utils/vconsoleWrapper";
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<html lang="zh">
<head>
{/* < chrome 71 */}
<script
src="https://polyfill.io/v3/polyfill.min.js?features=globalThis"
async
></script>
</head>
<body className="text-2xl">
{children}
</body>
<VConsoleWrapper />
</html>
</>
);
}
try this, works for me
"use client";
import Script from "next/script";
declare var VConsole: any;
export default function WeChatVConsoleScript() {
return (
<Script
src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"
onReady={() => {
new VConsole();
}}
/>
);
}
try this, works for me
"use client"; import Script from "next/script"; declare var VConsole: any; export default function WeChatVConsoleScript() { return ( <Script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js" onReady={() => { new VConsole(); }} /> ); }
yeah, it works for me. Very good!
