DEV Community

Deni Sugiarto
Deni Sugiarto

Posted on

5 1

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"]
}
Enter fullscreen mode Exit fullscreen mode

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.

👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay