CODEWITHSUNDEEP
next.jsframer-motion
olv53
olv53

Reputation: 73

Framer-motion import breaks page Next Js

Hi I am trying to import framer-motion into a page in Next Js.

import { motion } from "framer-motion"

This breaks the page. I get the following error in terminal:

/Users/.../Sites/.../node_modules/framer-motion/dist/es/index.js:1
export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at eval (webpack-internal:///framer-motion:1:18)
    at Object.framer-motion (/Users/.../Sites/.../.next/server/pages/work.js:446:1)
    at __webpack_require__ (/Users/.../Sites/.../.next/server/pages/work.js:23:31)

I can't see any documentation on this problem anywhere.

Thanks,

Upvotes: 1

Views: 1965

Answers (4)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

I was getting this error after some refactoring and the issues was missing 'use client' directive in file where I was using framer-motion.

Upvotes: 1

Yash Tomar
Yash Tomar

Reputation: 1

This is only happening to some pages, I am working with Nextjs 14 now and this was working fine until I just added another component to my structure. Now, in the previous sections it is working fine but not with the new pages that I created.

Solution: need to put : "use client" and this worked(after updating too : npm update)

Upvotes: 0

Hasan Zahran
Hasan Zahran

Reputation: 1442

I had the same issue, You just need to update your packages.

npm update

Upvotes: 0

Sean W
Sean W

Reputation: 6618

I hit this same error. I noticed that Framer Motion (3.10.5) and Next (10.0.9) were both updated in the last 16 hours.

I ran npm update and it fixed this error for me but note that this command updates everything in your package.

If you are worried about breaking changes try updating just the two packages framer and next - npm update framer-motion next or yarn upgrade framer-motion next

Upvotes: 2

Related Questions