主题:Next.js 应用程序中未使用 CSS 的预加载警告

问题描述 投票:0回答:1

这个 Nextjs 代码给了我一个错误:

我的代码使用 Shadcn for Ui 和 Convex 作为后端。

我的文件夹结构如下:

enter image description here

我的主要布局文件如下:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import ConvexClientProvider from "../providers/ConvexClientProvider";
import { Toaster } from "@/components/ui/sonner";
import { ModalProvider } from "@/providers/modal-provider";

const inter = Inter({ subsets: ["latin"], preload: true });

export const metadata: Metadata = ({
  title: "Create Next App",
  description: "Generated by create next app",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ConvexClientProvider>
          <Toaster />
          <ModalProvider />
          {children}
        </ConvexClientProvider>
      </body>
    </html>
  );
}

我的仪表板布局文件如下:

import { Navbar } from "./_components/Navbar";
import { OrgSidebar } from "./_components/Org-Sidebar";
import Sidebar from "./_components/sidebar";

interface DashboardLayoutProps {
    children: React.ReactNode;
}

const DashboardLayout = ({
    children,
}: DashboardLayoutProps) => {
    return (
        <main className="h-full">
            <Sidebar />
            <div className="pl-[60px] h-full">
                <div className="flex gap-x-3 h-full">
                    <OrgSidebar />
                    <div className="h-full flex-1">
                        <Navbar />
                        {children}
                    </div>
                </div>
            </div>
        </main>
    )
}

export default DashboardLayout;

我的代码只显示白屏和一个警告,如下

错误是:“资源 http://localhost:3000/%5C_next/static/css/app/(dashboard)/layout.css?v=1719131483630 已使用链接预加载进行预加载,但在窗口的几秒钟内未使用load 事件。请确保它具有适当的 `as` 值并且是有意预加载的。”

我想删除此错误并使我的代码正常工作

当前显示正在加载图标,但之后不再显示,没有任何错误,但显示白色显示。

javascript reactjs next.js error-handling runtime-error
1个回答
0
投票

不幸的是,截至 2024 年 6 月 24 日,这是一个已知且未解决的问题(请参阅官方 NextJS 存储库上的此 Github 讨论)。您可以阅读有关人们为遇到相同警告的人们尝试过的不同解决方案的信息,其中一些有效,许多无效。也许这些解决方案之一适合您。

好消息是你没有做错任何事。

© www.soinside.com 2019 - 2024. All rights reserved.