Next.js中react-grid-layout的Layouts类型导入失败求助

1. 检查版本兼容性 #

运行以下命令确认react-grid-layout和@types/react-grid-layout版本是否匹配：

npm list react-grid-layout @types/react-grid-layout

如果版本差异较大（比如库是v1.x，类型包是v0.x），执行以下命令更新类型包到对应版本：

npm install --save-dev @types/react-grid-layout@latest

2. 修正类型导入与使用 #

react-grid-layout中，Responsive组件对应的布局类型是ResponsiveLayouts，而非Layouts（Layouts是针对静态GridLayout的类型）。修改代码中的导入和类型声明：

'use client'

import { Responsive, WidthProvider, ResponsiveLayouts } from "react-grid-layout";
import { useState } from "react";

export function DragBoard() {
  // 使用ResponsiveLayouts替代Layouts
  const [ layouts, setLayouts ] = useState<ResponsiveLayouts>({
    lg : [
      { i: "1", x: 0, y: 0, w: 3, h: 1 }
    ]}
  );

  const ResponsiveGridLayout = WidthProvider(Responsive);

  return (
    <ResponsiveGridLayout
      className="layout bg-orange-100 m-10"
      layouts={layouts}
      breakpoints={{ lg: 1200}}
      cols={{ lg: 3}}
    >
      <div key="1" className="bg-pink-100">1</div>
    </ResponsiveGridLayout>
  );
}

3. 重启TypeScript服务 #

如果修改后类型仍未高亮，重启VSCode的TypeScript服务：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 选择TypeScript: Restart TS Server

4. 确认类型包安装位置 #

@types包通常作为开发依赖安装，若之前用--save安装到了生产依赖，可重新安装到dev依赖：

npm uninstall @types/react-grid-layout
npm install --save-dev @types/react-grid-layout

内容的提问来源于stack exchange，提问作者tan shi yu