TypeError: (0, _lib_utils__WEBPACK_IMPORTED_MODULE_1__.cn) 不是一个函数 - 我正在尝试制作一个 nextjs 和 React 平台，它给了我这个

Question

src/components/MaxWidthWrapper.tsx (12:27) @ MaxWidthWrapper
 ⨯ TypeError: (0 , _lib_utils__WEBPACK_IMPORTED_MODULE_1__.cn) is not a function
    at MaxWidthWrapper (./src/components/MaxWidthWrapper.tsx:13:66)
    at stringify (<anonymous>)
digest: "3255126488"
  10 | }) => {
  11 |     return(
> 12 |         <div className={cn('mx-auto w-full max-w-screen-xl px-2.5 md:px-20', className)}>
     |                           ^
  13 |             {children}
  14 |         </div>
  15 |     )
 ✓ Compiled /favicon.ico in 32ms (264 modules)

我有一个 page.tsx 文件，其中包含以下代码：

import MaxWidthWrapper from "@/components/MaxWidthWrapper";

export default function Home() {
  return (
    <MaxWidthWrapper className="mb-12 mt-28 sm:mt-40 flex flex-col items-center justify-center text-center">
      <div className="mx-auto mb-4 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full border border-gray-200 bg-white px-7 py-2 shadow-md backdrop-blur transition-all hover:border-gray-300 hover:bg-white/50">
        <p className="text-sm font-semibold dext-gray-700">
          GlobalFinanceFX is now public
        </p>
      </div>
    </MaxWidthWrapper>
  )
}

一个 utils.ts 文件，该文件具有应在所有站点上重复使用的功能，以在右侧和左侧添加相等的间距。

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]){
    return twMerge(clsx(inputs))
}

这是 MaxWidthWrapper.tsx 文件，其中显示有 a 并且 utils.ts 不是函数：

import { cn } from "@/lib/utils"
import { ReactNode } from "react"

const MaxWidthWrapper = ({
    className,
    children,
}: {
    className?: string
    children: ReactNode
}) => {
    return(
        <div className={cn('mx-auto w-full max-w-screen-xl px-2.5 md:px-20', className)}>
            {children}
        </div>
    )
}

export default MaxWidthWrapper

以下是包含文件的文件夹： 这是所有文件

Answer 1

我也有同样的问题。您使用的 Next.JS 和 React 版本是什么？

我正在将一家企业的代码更新到最新版本，以测试这是否可以解决问题。如果修复的话会通知您。