Network not working: "TypeError: Cannot convert undefined or null to object" in next.js 13.4.4 app router

James-Lam commented 1 year ago

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

STller commented 1 year ago

same issues 🤔

hevi1991 commented 1 year ago

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

loakliu commented 8 months ago

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!

yjw0628 commented 7 months ago

same issues 🤔

Ruler1020730 commented 6 months ago

same issues 🤔

Tencent / vConsole

Network not working: "TypeError: Cannot convert undefined or null to object" in next.js 13.4.4 app router #636