javascript - framer motion crashes next js app with the following error: "SyntaxError: Named export 'useId&

admin管理员组

文章数量:1415673

I get this error on my next js app and I don't even know why or where its ing from since the code that's throwing the error is not even written by me.

error - file:///Users/cheq/Desktop/cheqo/node_modules/framer-motion/dist/es/ponents/AnimatePresence/use-presence.mjs:1
import { useContext, useId, useEffect } from 'react';
                     ^^^^^
SyntaxError: Named export 'useId' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { useContext, useId, useEffect } = pkg;

I get this error when I import anything from framer motion, here is my full code:

import React from 'react';
import { motion } from 'framer-motion';

function motionpage() {
  return (
    <>
      <div>motionpage</div>
      <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
        Button
      </motion.button>
    </>
  );
}

export default motionpage;

How can I fix this?

I get this error on my next js app and I don't even know why or where its ing from since the code that's throwing the error is not even written by me.

error - file:///Users/cheq/Desktop/cheqo/node_modules/framer-motion/dist/es/ponents/AnimatePresence/use-presence.mjs:1
import { useContext, useId, useEffect } from 'react';
                     ^^^^^
SyntaxError: Named export 'useId' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { useContext, useId, useEffect } = pkg;

I get this error when I import anything from framer motion, here is my full code:

import React from 'react';
import { motion } from 'framer-motion';

function motionpage() {
  return (
    <>
      <div>motionpage</div>
      <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
        Button
      </motion.button>
    </>
  );
}

export default motionpage;

How can I fix this?

• javascript
• reactjs
• next.js
• framer-motion

Share Improve this question Follow asked Oct 20, 2022 at 21:59 Ripas55Ripas55 96311 gold badge1717 silver badges2929 bronze badges 1

• It was a pretty long time ago, but maybe you remember what was the solution? I am experiencing exactly the same problem with framer-motion – Phelizer Commented Nov 9, 2023 at 17:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

useId is a new hook introduced in React 18. Upgrade your react version and try again.

本文标签：