AnimatePresence causing 'Uncaught TypeError: Cannot read properties of null (reading 'useRef')'

Question

当尝试在我的项目中实施 framer-motion 时，我在控制台中收到以下错误并且页面上没有呈现任何内容。

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1625:1)
    at useIsMounted (use-is-mounted.mjs:5:1)
    at useForceUpdate (use-force-update.mjs:7:1)
    at AnimatePresence (index.mjs:70:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)

The above error occurred in the <AnimatePresence> component:

    at AnimatePresence (http://localhost:3000/static/js/bundle.js:97070:21)
    at Router (http://localhost:3000/static/js/bundle.js:80437:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:79913:5)
    at App (http://localhost:3000/static/js/bundle.js:47:51)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:27442:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:26285:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:27462:5)
    at Provider (http://localhost:3000/static/js/bundle.js:77353:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

index.js

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import reducer from "./store";

import { ThemeProvider, createTheme } from "@mui/material/styles";

const store = configureStore({ reducer });
const theme = createTheme({
    palette: {
        primary: {
            main: "#00ad9c",
            light: "#00dbc6",
            dark: "#008578",
            contrastText: "#000",
        },
        secondary: {
            main: "#e98c14",
            light: "#ffaa17",
            dark: "#cc7608",
            contrastText: "#000",
        },
    },
});

ReactDOM.render(
    <StrictMode>
        <Provider store={store}>
            <ThemeProvider theme={theme}>
                <App />
            </ThemeProvider>
        </Provider>
    </StrictMode>,
    document.getElementById("root")
);

import React, { useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useMediaQuery } from "@mui/material";
import { AnimatePresence } from "framer-motion";

import Navbar from "./components/Navbar/Navbar";
import DefaultRoute from "./components/Routes/DefaultRoute";

import Home from "./routes/Home/Home";
import About from "./routes/About/About";
import Error404 from "./routes/Errors/404";

const PRELOAD_IMAGE_URLS = [
    "resources/censor1.jpg",
    "resources/censor2.png",
    "resources/censor3.png",
    "resources/censor4.png",
    "resources/censor5.png",
];

function App() {
    // Have the browser preload the images
    useEffect(() => {
        PRELOAD_IMAGE_URLS.forEach((url) => {
            new Image().src = url;
        });
    }, []);

    return (
        <Router>
            <AnimatePresence>
                <Routes>
                    <Route
                        path="/"
                        element={<DefaultRoute component={Home} />}
                    />
                    <Route
                        path="/about"
                        element={<DefaultRoute component={About} />}
                    />
                    <Route path="*" element={<Error404 />} />
                </Routes>
            </AnimatePresence>
        </Router>
    );
}

export default App;

备注
删除 AnimatePresence 完全停止显示错误。不确定为什么会出现此错误，因为用以前的项目重现此问题已不成功。我环顾四周，没有发现类似的问题。

Answer 1

问题是由于 framer-motion 安装在错误的位置。

project-name/
 backend/
 frontend/
  package.json <-- meant to be installed here
 server.js
 package.json <-- installed here instead

这导致编译版本没有 framer-motion 安装正确