React TodoList项目报错：无法解析'react-beautiful-dnd'模块求助

核心原因 #

你仅安装了react-beautiful-dnd的TypeScript类型定义包@types/react-beautiful-dnd，但未安装实际的核心库react-beautiful-dnd，导致webpack无法定位该模块。

解决步骤 #

1. 安装核心库
   在项目根目录执行以下命令：

npm install react-beautiful-dnd
# 或使用yarn
yarn add react-beautiful-dnd

2. 验证依赖
   安装完成后，检查package.json的dependencies字段，应新增核心库条目：

"react-beautiful-dnd": "^x.x.x"

3. 重启开发服务器
   关闭当前的react-scripts start进程，重新启动项目，避免缓存导致的模块识别异常。

额外检查点 #

• 版本兼容性：React 18需搭配react-beautiful-dnd@13.1.0及以上版本，若出现兼容问题，可指定版本安装：

npm install react-beautiful-dnd@13.1.1

• 导入拼写校验：确保代码中的导入语句无拼写错误，示例：

import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd"

修正后的package.json示例 #

调整后的package.json需包含核心库依赖，示例如下：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.45",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4",
    "react-beautiful-dnd": "^13.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-beautiful-dnd": "^13.1.2"
  }
}

内容的提问来源于stack exchange，提问作者Fyodor76