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

Question

When trying to implement framer-motion into my project I get the following errors in my console and nothing renders on the page.

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;

Note
Removing AnimatePresence entirely stops the error from showing. Unsure why this error occurs as recreating this issue with previous projects has been unsuccessful. I have looked around and did not find a similar issue.

Answer 1

The issue was caused by framer-motion being installed at the wrong location.

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

This was causing the compiled version to not have framer-motion installed correctly