1 reply

Next.js Script tag breaking my app

Working on a simple app to implement Office add-in via next-js. The thing is when I try to route between pages using the

<Link>

<Link>

tag from Next.js, if there is a

<Script>

<Script>

present it just breaks my app. Script tag is placed on app/layout.tsx:

import "~/styles/globals.css";

import { Inter } from "next/font/google";

import { TRPCReactProvider } from "~/trpc/react";
import Script from "next/script";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
        <Script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></Script>
      </body>
    </html>
  );
}

import "~/styles/globals.css";

import { Inter } from "next/font/google";

import { TRPCReactProvider } from "~/trpc/react";
import Script from "next/script";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
        <Script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></Script>
      </body>
    </html>
  );
}

And the simple

app/page.tsx

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Hello!</h1>
      <Link href="/archive">Go to archive</Link>

    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Hello!</h1>
      <Link href="/archive">Go to archive</Link>

    </div>
  )
}

The error:

Application error: a client-side exception has occurred (see the browser console for more information).

Application error: a client-side exception has occurred (see the browser console for more information).

Console:

Warning: useInsertionEffect must not schedule updates.
    at HistoryUpdater

Uncaught TypeError: window.history.pushState is not a function

The above error occurred in the <HistoryUpdater> component:

Warning: useInsertionEffect must not schedule updates.
    at HistoryUpdater

Uncaught TypeError: window.history.pushState is not a function

The above error occurred in the <HistoryUpdater> component:

Any indea on what might be happening?

TTC

Theo's Typesafe Cult•2y ago•

1 reply

argcast

Next.js Script tag breaking my app

Working on a simple app to implement Office add-in via next-js. The thing is when I try to route between pages using the

<Link>

<Link>

tag from Next.js, if there is a

<Script>

<Script>

present it just breaks my app. Script tag is placed on app/layout.tsx:

import "~/styles/globals.css";

import { Inter } from "next/font/google";

import { TRPCReactProvider } from "~/trpc/react";
import Script from "next/script";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
        <Script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></Script>
      </body>
    </html>
  );
}

import "~/styles/globals.css";

import { Inter } from "next/font/google";

import { TRPCReactProvider } from "~/trpc/react";
import Script from "next/script";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider>{children}</TRPCReactProvider>
        <Script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></Script>
      </body>
    </html>
  );
}

And the simple

app/page.tsx

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Hello!</h1>
      <Link href="/archive">Go to archive</Link>

    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Hello!</h1>
      <Link href="/archive">Go to archive</Link>

    </div>
  )
}

The error:

Application error: a client-side exception has occurred (see the browser console for more information).

Application error: a client-side exception has occurred (see the browser console for more information).

Console:

Warning: useInsertionEffect must not schedule updates.
    at HistoryUpdater

Uncaught TypeError: window.history.pushState is not a function

The above error occurred in the <HistoryUpdater> component:

Warning: useInsertionEffect must not schedule updates.
    at HistoryUpdater

Uncaught TypeError: window.history.pushState is not a function

The above error occurred in the <HistoryUpdater> component:

Any indea on what might be happening?

Next.js Script tag breaking my app

Similar Threads

Next.js Script tag breaking my app

Similar Threads

Similar Threads

Similar Threads