0

After I imported the code from github and run npm run dev to show website, the error below occur. So, I must reinstalled three libraries react-beautiful-dnd, react-modal, react-datepicker to make the website work.

Error: The following dependencies are imported but could not be resolved:

  react-beautiful-dnd (imported by /Users/future/trello-clone/trello-clone/src/App.tsx)
  react-datepicker (imported by /Users/future/trello-clone/trello-clone/src/App.tsx)
  react-datepicker/dist/react-datepicker.css (imported by /Users/future/trello-clone/trello-clone/src/App.tsx)
  react-modal (imported by /Users/future/trello-clone/trello-clone/src/App.tsx)

Are they installed?
    at file:///Users/future/trello-clone/trello-clone/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:45655:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/future/trello-clone/trello-clone/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:45064:38
Failed to resolve import "react-beautiful-dnd" from "src/App.tsx". Does the file exist?
3:26:24 PM [vite] Internal server error: Failed to resolve import "react-beautiful-dnd" from "src/App.tsx". Does the file exist?

How can I fix this issue so to be able to run npm run dev without reinstalling these three libraries? Here is my dependencies and devdependencies from my package.json file.

{
    "name": "trello-clone",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-beautiful-dnd": "^13.1.1",
        "react-datepicker": "^4.16.0",
        "react-dom": "^18.2.0",
        "react-modal": "^3.16.1",
        "@types/react-beautiful-dnd": "^13.1.4",
        "@types/react-datepicker": "^4.15.0",
        "@types/react-modal": "^3.16.0"
    },
    "devDependencies": {
        "@types/react": "^18.2.15",
        "@types/react-dom": "^18.2.7",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "@vitejs/plugin-react": "^4.0.3",
        "eslint": "^8.45.0",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.3",
        "typescript": "^5.0.2",
        "vite": "^4.4.5"
    }
}

0 Answers0