framer在下一个js应用程序中崩溃，有以下错误："SyntaxError:命名导出'useId‘not“

Question

我在我的下一个js应用程序中得到了这个错误，我甚至不知道它是从哪里来的，因为抛出错误的代码甚至不是我写的。

error - file:///Users/cheq/Desktop/cheqo/node_modules/framer-motion/dist/es/components/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;

当我从framer运动中导入任何内容时，我会得到这个错误，下面是我的完整代码：

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;

我怎么才能解决这个问题？

Answer 1

useId是Resive18中引入的一个新钩子。请升级您的React版本，然后再试一次。