Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
James-Lam opened this issue Jul 18, 2023 · 6 comments · May be fixed by #693
Open

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

James-Lam opened this issue Jul 18, 2023 · 6 comments · May be fixed by #693

Comments

@James-Lam
Copy link

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:

  1. When page on load, the vconsole panel can be opened as well as the network panel.
  2. 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):

  1. Go forward and back in next.js app. （pages should perform requests）
  2. 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:
image

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
Copy link

STller commented Jul 20, 2023

same issues 🤔

@hevi1991
Copy link

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
Copy link

loakliu commented Feb 27, 2024

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
Copy link

yjw0628 commented Apr 11, 2024

same issues 🤔

1 similar comment
@Ruler1020730
Copy link

same issues 🤔

@taufiqelrahman taufiqelrahman linked a pull request Oct 10, 2024 that will close this issue
Open
@sweetcard
Copy link

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

It works sometimes but not always.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: TypeError: Cannot convert undefined or null to object taufiqelrahman/vConsole
7 participants
@hevi1991 @yjw0628 @James-Lam @sweetcard @STller @Ruler1020730 @loakliu