Could not find a declaration file for module framer-motion Error in Next.js 14

When integrating Framer Motion for animations in a Next.js 14 project with TypeScript, you might encounter the following error:

Could not find a declaration file for module 'framer-motion'

Typically, for other libraries, you might resolve this issue by installing the corresponding @types package. However, Framer Motion does not provide @types/framer-motion as it's already written in TypeScript. Instead, the issue is often related to TypeScript configuration.

Here's how to fix the issue:

Update tsconfig.json

The key to resolving the issue lies in adjusting your TypeScript configuration. Specifically, you need to change the moduleResolution option from "bundler" to "node". This ensures that TypeScript uses Node's module resolution strategy, which is more compatible with many libraries.

Here's the updated tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

In this configuration:

moduleResolution: Changed from "bundler" to "node". This setting tells TypeScript to resolve modules using Node.js conventions, which is often more reliable for third-party packages.

By following these steps, you should be able to resolve the type declaration error and use Framer Motion with TypeScript in your Next.js 14 project without further issues.